您的位置:首页 > 其它

webuploader在ie7下的flash模式的使用

2016-04-06 12:15 411 查看
webuploader在ie7下不能使用h5模式上传图片,只能使用flash模式。

但是出现了几个问题:(1)必须正确的引入.swf文件,才能使webuploader正常运行

                                        (2)正常传输模式下,flash模式使用的md5不能上传太大的文件,(好像只能上传50k左右),所以要改成二进制流
sendAsBinary
的模式上传

                                        (3)二进制上传的使用file_get_contents(‘php://input’)获取上传内容(自己百度)

代码:html

<div class="descriptPic" style="color:red;margin:0 -100px 4px;">
<label id="contactpic" style="width:100px;color:#727272;">问题截图:</label>
<!-- <input type="file" name="descriptPic[]" value="选择图片"/> -->
<div id="uploader" class="uploader" style="width: 400px;float:left;margin-bottom: 15px;">
<div class="queueList">
<div class="webuploader-container" id="filePicker" style=" width: 150px;">
<div style="position: absolute;top: 0;left: 0;width: 150px;height: 45px;overflow: hidden;bottom: auto;right: auto;" id="rt_rt_1aec5bmr5qg9m5o1eat1pahqe1">
<input accept="image/*" multiple="multiple" class="webuploader-element-invisible" name="file" type="file" style="margin-left:0;margin-right:0;width:150px;height:40px;"/>
<label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255) none repeat scroll 0% 0%;">
</label>
</div>
</div>
<ul class="filelist"></ul>
</div>
<div class="statusBar">
<div class="progress" style="display: none;">
<span class="text">0%</span>
<span class="percentage" style="width: 0%;"></span>
</div><div class="info" style="color: #5A5A5A;font-size: 15px ">共0张(0B),已上传0张</div>
<div class="btns">
</div>
<div class="uploadBtn state-ready" id="uploadBtn" onclick="check_upload_type()" style="CURSOR:pointer;width: 390px;margin-top: 5px;">提交</div>
</div>
</div>
</div>

js:
<script type="text/javascript">
// 添加全局站点信息
var BASE_URL = '{$smarty.const.THEME_URL}';
//alert(BASE_URL);
</script>
<script type="text/javascript" src="js/webuploader.js"></script>
<script type="text/javascript">
var upload_type=1;
var p_name=document.getElementById('p_name');
p_name.value = new Date().getTime();
var $ = jQuery,
$list = $('#fileList'),
$wrap = $('#uploader'),

// 图片容器
$queue = $('<ul class="filelist"></ul>')
.appendTo( $wrap.find('.queueList') ),

// 状态栏,包括进度和控制按钮
$statusBar = $wrap.find('.statusBar'),

// 文件总体选择信息。
$info = $statusBar.find('.info'),

// 上传按钮
$upload = $wrap.find('.uploadBtn'),

// 没选择文件之前的内容。
$placeHolder = $wrap.find('.placeholder'),

// 总体进度条
$progress = $statusBar.find('.progress').hide(),

// 添加的文件数量
fileCount = 0,

// 添加的文件总大小
fileSize = 0,

// 优化retina, 在retina下这个值是2
ratio = window.devicePixelRatio || 1,

// 缩略图大小
thumbnailWidth = 110 * ratio,
thumbnailHeight = 110 * ratio,

// 可能有pedding, ready, uploading, confirm, done.
state = 'pedding',
// 所有文件的进度信息,key为file id
percentages = {},

supportTransition = (function(){
var s = document.createElement('p').style,
r = 'transition' in s ||
'WebkitTransition' in s ||
'MozTransition' in s ||
'msTransition' in s ||
'OTransition' in s;
s = null;
return r;
})(),

// WebUploader实例
uploader;

if ( !WebUploader.Uploader.support() ) {
alert( 'Web Uploader 不支持您的浏览器!如果你使用的是IE浏览器,请尝试升级 flash 播放器');
throw new Error( 'WebUploader does not support the browser you are using.' );
}
// 初始化Web Uploader
uploader = WebUploader.create({
runtimeOrder:'flash',
pick: {
id: '#filePicker',
innerHTML: '点击选择图片'
},
fileNumLimit:6,
//auto: true,
method:'post',
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
},
// swf文件路径
swf:BASE_URL+ 'Public/images/Uploader.swf',
//disableGlobalDnd: true,
sendAsBinary:true,
chunked: true,
server: '{url m="FeedBack" a="imageupload"}',
fileSizeLimit: 5 * 1024 * 1024,    // 200 M
fileSingleSizeLimit: 1 * 1024 * 1024    // 50 M
});


其它引入的文件跟webuploader实例一样。因为使用了框架,所以可能有点乱
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: