webuploader在ie7下的flash模式的使用

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实例一样。因为使用了框架,所以可能有点乱

猜你喜欢

转载自blog.csdn.net/germy2/article/details/88184229
今日推荐