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

所属分类:输入-上传

 64517  361  查看评论 (116)
分享到微信朋友圈
X
支持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>
相关插件-上传

h5拖拽文件图片上传插件

支持拖拽上传,拖拽排序,图片压缩的简单上传插件
  上传
 69867  496

jquery多图片上传

多张图片上传,显示
  上传
 290536  802

jQuery图片上传展示插件imgFileupload.js

jQuery图片上传展示,支持多图上传,限制图片上传个数
  上传
 112494  506

js上传图片预览

js上传图片本地预览
  上传
 113208  536

讨论这个项目(116)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ╀傀儡娃娃ス。 0
    2020/5/15 11:03:55
    想问一下,这个在ie8 兼容么? 为啥我点击没反应呢?
        xta fnhc tewq0
        2020/6/10 10:48:09
        可以兼容的,可能是你的swf文件路径错了吧
    回复
    魅rl 0
    2019/12/17 10:15:02
    为什么点击上传文件不行
    回复
    智斗 0
    2019/10/10 11:06:27
    为什么在IE8下选择文件的按钮变得很长呢flash是最新版本 并且点击选择文件按钮没有反应 回复
    0
    2019/8/21 15:12:27
    文件格式 只能传.doc吗
        xta fnhc tewq0
        2019/12/9 15:23:06
        可以自己自定义的
    回复
    夜微凉、想念不休 0
    2018/8/14 10:08:44
    ie8、9上传没有反应,flash更新、console注释了
        夜微凉、想念不休0
        2018/8/14 11:17:59
        upload.swf路径放错了
        无他无爱0
        2019/3/19 15:30:38
        参数传对了吗
    回复
    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下可以正常上传吗?
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复