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

所属分类:输入-上传

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

更新时间:2018/3/24 下午9:21:47

更新说明: 如在IE8/9浏览器中不能使用,请更新flash player,因为webuploader在低版本IE是使用flash进行文件选择及上传的  

    1、新增了自定义请求header、自定义预览图、反复上传功能
    2、优化了之前不够好的代码
    3、新增了许多使用案例。(具体请参见:https://941477276.github.io/UploadPreview/doc/index.html)


更新时间:2017/12/18 上午9:19:27

更新说明:修复IE8下的一些bug


更新时间:2017/12/4 上午11:45:30

更新说明:

    1、使用了最新版本的webuploader

    2、更改了一些功能的内部实现方式

    3、增加了拖拽上传功能


更新时间: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>
相关插件-上传

webuploader 上传插件(根据官方做了小改)

webuploader上传插件,上图之前图片可编辑、可随意排版上传图片顺序
  上传
 33450  142

html5文件上传插件Pure HTML5 file upload

html5文件上传插件Pure HTML5 file upload
  上传
 40786  89

基于amazeui头像上传

基于amazeui框架,设计的头像上传插件
  上传
 35712  177

pc端图片批量上传,可拖动图片交换位置

jQuery可批量上传图片 可以拖动交换位置 可删除
  上传
 28474  109

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

    夜微凉、想念不休 0
    2018/8/14 10:08:44
    ie8、9上传没有反应,flash更新、console注释了
        夜微凉、想念不休0
        2018/8/14 11:17:59
        upload.swf路径放错了
    回复
    Drunk 0
    2018/5/22 20:20:08
    console都注释了 flash最新版 ie9一下点击全失效
        Drunk0
        2018/5/23 9:53:54
        很奇怪啊 我把你的演示示例放在ie9上运行就没问题 下载到我本机运行就有问题
        xta fnhc tewq0
        2018/6/1 11:26:17
        这个问题就奇怪了,我真机IE9都没问题的
    回复
    繁华落尽 0
    2018/3/21 16:56:01
    能不能给个在编辑页面时这个控件读取上传过的数据
        xta fnhc tewq0
        2018/3/26 18:04:27
        这个功能你要自己换个思路去实现,我这个是上传插件
        繁华落尽0
        2018/4/3 9:34:15
        帮忙写个啊,这改起来太难了
        xta fnhc tewq0
        2018/4/3 9:44:22
        老兄你这是业务逻辑呀,我怎么帮你写!只能是换个思路。你可以在页面加载过来时把图片渲染出来,渲染的样式与上传文件的样式保存一致就可以了,如果要删除图片你自己再绑定下事件不就行了么
        繁华落尽0
        2018/4/18 14:17:57
        我想做到编辑时自动把上传过的文件加载到长传控件上,然后判断文件个数之类的都会加上已经传过的,而不是编辑页面放个新的上传控件没有绑定过已经上传过的附件
    回复
    随遇而安 0
    2018/3/13 17:15:35
    想问一下,这个最近更新了吗
        xta fnhc tewq0
        2018/4/21 17:53:33
        2018.03.24更新了
    回复
    喂,站住 0
    2018/2/9 11:48:55
    为什么我ie8,9点选择图片都没反应呢
        xta fnhc tewq0
        2018/3/24 21:17:28
        在IE9及以下浏览器,webuploader是基于flash进行上传的,如IE8、9不能使用,请更新flash player,目前只能这样。后续看下能不能找到更好的解决办法
        我有点儿懵~0
        2018/3/28 16:36:13
        s是的
    回复
    0
    2018/1/19 10:14:26

    IE 9 为何无法使用,完全把代码copy 过去都不行

        贤贤熊0
        2018/1/22 17:31:50
        IE9下不兼容console.log,可以将代码中的console.log去掉以后再试试
        Today0
        2018/3/22 10:59:16
        你好,ie8下可以正常上传吗?
    回复
    东北陈大嘴 0
    2018/1/17 18:47:01

    点击添加数据就报错??

    回复
    -Mr.k 0
    2017/12/29 14:58:53

    有用ajax提交的 demo嘛?

    回复
    心淡如水 0
    2017/12/16 10:25:54

    你好.ie8下为什么报错

        xta fnhc tewq0
        2017/12/18 9:19:20

        报什么错?报console错误的我已经解决了,上传了新的版本

        心淡如水0
        2017/12/18 10:08:27

        ie8文件都打不开,可以加下qq咨询下你吗?我的584731170

    回复
    447310574 0
    2017/12/5 22:39:30

    可以支持多个实例吗?

        xta fnhc tewq0
        2017/12/8 9:52:34

        可以的,在同一个页面中可以有多个实例

        4473105740
        2017/12/10 20:42:25

        WebUploader 在IE8,9中使用flash模式的时候,报错。me._responseJson = me._response ? p(me._response) : {};什么问题?

        xta fnhc tewq0
        2017/12/11 11:09:24

        这个没遇到过,你看下你的配置是否正确咯

        4473105740
        2017/12/11 11:22:11
        这个插件能点击才上传吗?
        xta fnhc tewq0
        2017/12/13 16:17:47

        可以呀,你把auto属性设为false,或不写auto属性就不会自动上传呀

        4473105740
        2017/12/14 8:50:10
        您好,在IE8下正常,IE9下,按钮一打开页面是红色的,点击不了,按F12启动调试后又可以了,是第133行的console.log 报错了。
        xta fnhc tewq0
        2017/12/15 9:53:06

        好的,插件里面没有console,IE8、9中是没有console对象的,因此才报错了

    回复
取消回复
  短信接口