jQuery支持预览多文件多图片批量上传插件

jQuery支持预览多文件多图片批量上传插件

添加时间:2020-12-14 02:27:34
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:上传
  • 模板颜色模板颜色:初级
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

支持即时在线预览的jQuery多文件上传插件、多图片批量上传插件。还有上传进度条效果,很实用的一款网页上传代码。
jQuery支持预览多文件多图片批量上传插件
分类:其它特效 > 上传 难易:初级

js代码

<script src="jquery.min.js"></script>
        <script src="webuploader.js"></script>
        <script src="uploadImgPreview.min.js"></script>
        <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支持预览多文件多图片批量上传插件

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.086732s