• 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="100px;color:#727272;">问题截图:</label>
        <!-- <input type="file" name="descriptPic[]" value="选择图片"/> -->
        <div id="uploader" class="uploader" style=" 400px;float:left;margin-bottom: 15px;">
            <div class="queueList">
                        <div class="webuploader-container" id="filePicker" style=" 150px;">
                            <div style="position: absolute;top: 0;left: 0; 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;150px;height:40px;"/>
                                <label style="opacity: 0; 100%; height: 100%; display: block; cursor: pointer; background: #ffffff 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=" 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; 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实例一样。因为使用了框架,所以可能有点乱
  • 相关阅读:
    如何分配资源和管理资源
    让Project把周六和周日也计算工期
    Project设置子任务
    pytest-配置文件
    pytest-fixture
    pytest-标记
    pytest-断言
    pytest-参数化
    pytest入门
    maven-插件
  • 原文地址:https://www.cnblogs.com/xproer/p/10509629.html
Copyright © 2020-2023  润新知