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') ),

    // 狀態(tài)欄，包括進度和控制按鈕
            $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,

    // 優(yōu)化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
    });