支持IE8的多文件、多图异步上传并能预览的插件

所属分类:输入-上传

 12594  55  查看评论 (72)
支持IE8的多文件、多图异步上传并能预览的插件 ie兼容8

更新时间:2017/9/30 下午11:14:43

更新说明:

    1、修复IE8点击上传图标删除不了的bug及文件数量统计不正确的bug

    2、优化预览图宽度计算方式,当自定义预览框时,预览图大小随着.imgWrap元素的宽度而变化。


更新时间:2017/8/28 下午5:32:12

更新说明:

    1)、使用面向对象编程思想进行封装,一个页面中可以有n个实例

    2)、支持AMD、CMD

    3)、提供了丰富的参数配置及方法,可灵活应用于您的项目中 

    4)、使用简单,方便

<!-- .webuploader-pick 这个类可以控制选择文件可点按钮的大小 -->
<h1>即可以选择图片又可以选择其他文件</h1>
<div id="uploader"></div>
<!-- 千万不要使用button标签,否则在火狐和IE中点击会无效
        <button type="button" id="choose_file">选择图片</button> -->
<div class="choose-file-btn" id="choose_file">选择图片</div>
<button type="button" id="upload_now">上传图片</button>
<h2>只能选择图片</h2>
<div id="uploader2"></div>
<!-- 千万不要使用button标签,否则在火狐和IE中点击会无效
        <button type="button" id="choose_file">选择图片</button> -->
<div class="choose-file-btn" id="choose_file2">选择图片</div>
<button type="button" id="upload_now2">上传图片</button>
<button type="button" id="retry_upload">重新上传</button>
<script>
    $(function() {
        var uploader = uploadImage({
            wrap: jQuery("#uploader"), //包裹整个上传控件的元素,必须。可以传递dom元素、选择器、jQuery对象
            /*预览图片的宽度,可以不传,如果宽高都不传则为包裹预览图的元素宽度,高度自动计算*/
            //width: "160px", 
            height: 100, //预览图片的高度
            auto: false, //是否自动上传
            method: "POST", //上传方式,可以有POST、GET
            sendAsBlob: false, //是否以二进制流的形式发送
            viewImgHorizontal: true, //预览图是否水平垂直居中
            fileVal: "file", // [默认值:'file'] 设置文件上传域的name。
            btns: { //必须
                uploadBtn: $("#upload_now"), //开始上传按钮,必须。可以传递dom元素、选择器、jQuery对象
                retryBtn: null, //用户自定义"重新上传"按钮
                chooseBtn: '#choose_file', //"选折图片"按钮,必须。可以传递dom元素、选择器、jQuery对象
                chooseBtnText: "选择文件" //选择文件按钮显示的文字
            },
            pictureOnly: false, //只能上传图片
            datas: {
                "uuid": new Date().getTime()
            }, //上传的参数,如果有参数则必须是一个对象
            // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!false为不压缩
            resize: false,
            //是否可以重复上传,即上传一张图片后还可以再次上传。默认是不可以的,false为不可以,true为可以
            duplicate: false,
            multiple: true, //是否支持多选能力
            swf: "Uploader.swf", //swf文件路径,必须
            url: "index2.html", //图片上传的路径,必须
            maxFileNum: 20, //最大上传文件个数
            maxFileTotalSize: 10485760, //最大上传文件大小,默认10M
            maxFileSize: 2097152, //单个文件最大大小,默认2M
            showToolBtn: true, //当鼠标放在图片上时是否显示工具按钮,
            onFileAdd: null, //当有图片进来后所处理函数
            onDelete: null, //当预览图销毁时所处理函数
            /*当单个文件上传失败时执行的函数,会传入当前显示图片的包裹元素,以便用户操作这个元素*/
            uploadFailTip: null,
            onError: null, //上传出错时执行的函数
            notSupport: null, //当浏览器不支持该插件时所执行的函数
            /*当上传成功(此处的上传成功指的是上传图片请求成功,并非图片真正上传到服务器)后所执行的函数,会传入当前状态及上一个状态*/
            onSuccess: null
        });
        /*如果按钮开始是隐藏的,经过触发后才显示,则可以用这个方法重新渲染下*/
        //uploader.refresh();//该方法可以重新渲染选择文件按钮
        //uploader.upload();//调用该方法可以直接上传图片
        //uploader.retry();//调用该方法可以重新上传图片
        console.log(uploader);
        var uploader2 = uploadImage({
            wrap: "#uploader2", //包裹整个上传控件的元素,必须。可以传递dom元素、选择器、jQuery对象
            /*预览图片的宽度,可以不传,如果宽高都不传则为包裹预览图的元素宽度,高度自动计算*/
            //width: "160px", 
            height: 120, //预览图片的高度
            fileVal: "file", // [默认值:'file'] 设置文件上传域的name。
            btns: { //必须
                uploadBtn: $("#upload_now2"), //开始上传按钮,必须。可以传递dom元素、选择器、jQuery对象
                retryBtn: "#retry_upload", //用户自定义"重新上传"按钮
                chooseBtn: '#choose_file2', //"选折图片"按钮,必须。可以传递dom元素、选择器、jQuery对象
                chooseBtnText: "选择图片" //选择文件按钮显示的文字
            },
            pictureOnly: true, //只能上传图片
            resize: false,
            //是否可以重复上传,即上传一张图片后还可以再次上传。默认是不可以的,false为不可以,true为可以
            duplicate: true
        });
    });
</script>
相关插件-上传

jquery上传插件pictureHandle.js

基于jquery上传插件pictureHandle.js,带压缩、且代码注释全
  上传
 11493  25

Plupload文件上传插件

Plupload这个JavaScript控件可以让你选择Adobe Flash、Google Gears、HTML5、Microsoft Silverlight、Yahoo BrowserPlus或正常表单Form等多种方法进行文件上传。
  上传
 133913  141

js上传图片预览

js上传图片本地预览
  上传
 51917  194

jQuery多图上传插件imgUp.js

可以多图的上传,预览,并带删除功能
  上传
 41832  379

讨论这个项目(72)回答他人问题或分享插件使用方法奖励jQ币

    繁华落尽 0
    2017/11/17 17:59:26

    设置了自动上传后工具条就不显示了,这什么情况,auto:true后鼠标一移上去不显示工具栏

        xta fnhc tewq0
        2017/11/19 12:00:13

        上传完成了工具条就会自动隐藏掉,因为工具条只有在图片未上传时操作才有效

        繁华落尽0
        2017/11/20 10:20:41

        能不能设置图片不预览呢?

    回复
    0
    2017/10/25 9:17:52

    兄弟 有进度条吗

        xta fnhc tewq0
        2017/10/26 17:54:52
        暂时没做,你可以通过uploadPreview.uploader拿到webuploader对象实例,然后你可以自己去实现
        繁华落尽0
        2017/11/17 17:58:55

        设置了自动上传后工具条就不显示了,这什么情况,auto:true后鼠标一移上去不显示工具栏

    回复
    取名字好烦 0
    2017/9/29 20:06:35

    BUG实在是太多了,当限定了上传数量,选择文件达到限定的上限后删除文件,再重新选择文件依然不让你选择

        xta fnhc tewq0
        2017/9/30 23:12:04
        您说的选择文件数量达到上限后删除一张,然后再选择依然删不了的情况我也未发现
        取名字好烦0
        2017/10/12 9:22:42

        我是发现有这个问题了,假如我限定最多选择3张图片,当图片达到3张之后我删掉一张,再进行选择图片,想要选择的图片显示不出来

        xta fnhc tewq0
        2017/10/13 10:28:51

        你用的是什么浏览器?第一个版本的IE8中会出现这个问题,后面我更新后就修复了

    回复
    取名字好烦 0
    2017/9/29 13:44:39

    难道你就没发现fileVal参数无论怎么设置name属性值都是“file”吗?这个参数是来搞笑的吗

        xta fnhc tewq0
        2017/9/30 23:10:00
        您好,经我测试fileVal属性并未出现像您说的这个bug,近日我会上传最新版本
        取名字好烦0
        2017/10/12 9:25:02

        不是吧,难道我下载的是假的webuploader吗,设置fileVal值name属性始终不变,我只能在源码中修改

    回复
    塞纳河畔 0
    2017/9/27 15:56:40

    发生的发生的发的说法

    回复
    以优雅的姿势摸爬滚打 0
    2017/9/7 10:17:19

    好像不支持ie8.。。。

        xta fnhc tewq0
        2017/9/30 22:58:12
        我的原生IE8是支持的
    回复
    呱呜呱呜呱呜 0
    2017/9/1 17:16:46

    您好,请问怎样加headers,我在文档中没找到,谢谢

    回复
    呱呜呱呜呱呜 0
    2017/9/1 16:21:58

    您好,请问怎样加headers,我在文档中没找到,谢谢

    p.p1 {
    	margin:0.0px 0.0px 0.0px 0.0px;
    	font:12.0px Consolas;
    	color:#596972
    }
        xta fnhc tewq0
        2017/9/2 15:00:07
        什么加headers?没明白
    回复
    拐子过海 0
    2017/8/31 15:18:05

    为什么不行呀,本地测试上传失败啊  还有这个url也没有啊

        xta fnhc tewq0
        2017/9/1 10:20:01
        你的配置要配置好来呀
    回复
    jlxmaster 0
    2017/8/25 12:20:24
    怎么在IE9就不能弹出框呢
        xta fnhc tewq0
        2017/8/27 16:29:06

        近期会有更新,或者在<code>h t t p s: / / github.com/941477276/UploadPreview</code>

        上面查看更详细的文档

    回复
取消回复