webuploader在ie7下的flash模式的使用

WindySky 2016-12-16

展开全文

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
    });