jQuery FileUpload 插件

sugarmo 发布于2019-08-20 17:48 / 1621人阅读

摘要：插件在前端开发过程中，我们经常要上传文件，这是我们就要用这是原生的写法，看起来不是很美观。导入事件是一个文件上传组件，支持多文件上传取消删除，上传前缩略图预览列表显示图片大小，支持上传进度条显示支持各种动态语言开发的服务器端。

jQuery FileUpload 插件

在前端开发过程中，我们经常要上传文件，这是我们就要用这是原生的写法，看起来不是很美观。下面我们聊一种比较优雅的实现方法。

上传文件

首先，我们隐藏的input框，并将input框的click事件绑定到它上面的button元素上（通过onclick="$(this).next().click()"实现），这样我们就可以按照我们自己的喜好来设置button的样式，同时也达到了上传文件的功能。

fileupload 事件

jQuery File Upload 是一个Jquery文件上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。
我们这里主要说说文件上传和文件格式、大小的要求

引入相关插件

fileupload插件是必须的，fileupload-process负责处理上传过程中各个事件的管理，fileupload-validate则是对验证的支持

使用插件

我们可以对上传文件的大小和文件类型进行验证，并通过messages设置验证失败时的提示信息。

 $("input[name="file"]").fileupload({

       url: "上传地址",
       Type: "POST",
       autoUpload: true,
       acceptFileTypes:/.(doc|docx)$/i,// 文件格式
       maxFileSize: 99 * 1024 * 1024, //文件大小
       
       // 设置验证失败的提示信息
       messages: {
       maxFileSize: "File exceeds maximum allowed size of 99MB",
       acceptFileTypes: "File type not allowed"
       },
       
       processfail: function (e, data) {
           var currentFile = data.files[data.index];
           if (data.files.error && currentFile.error) {
               // there was an error, do something about it
               console.log(currentFile.error);
           }
       },
       
       done: function() {
          // 上传成功的回调函数，可以弹出“上传成功”之类的弹框
       },
       fail: function() {
          // 上传失败的回调函数，可以弹出“上传失败”之类的弹框
       },

     })

Jquery 有很多很好用的插件，逐个去学习不是很现实，只有在用到的时候，尽力去搞懂其使用方法。慢慢积累吧~~~

idc机房托管服务器托管 jquery fileupload jquery插件源码jquery jquery插件手写jQuery插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83881.html

node 实现图片的裁切与上传

摘要：使用了以后，图片上传可以由服务器来完成，保存后的图片地址再传给后台进行保存。图片的上传使用的插件表单上传生成通用识别码代码该游览器暂不支持文件上传代码上传失败文件不要超过上传成功图片的裁切使用的插件图片处理图像裁剪插件使用了node以后，图片上传可以由node服务器来完成，保存后的图片地址再传给后台进行保存。简单的文件操作切割，压缩什么的也可以交给node服务器完成。图片的上传使...

BigNerdCoding 2019-08-19 17:42 评论0 收藏0
WebUploader上传插件使用说明

摘要：否则强制转换成指定的类型。是否要分片处理大文件上传还有其他配置项上传事件选择需要上传的文件后，文件就会加入文件队列，并触发事件上传进度回调事件，在文件上传中，多次调用此事件当文件上传成功时触发当文件上传出错时触发。 WebUploader简述具有两套运行时支持：HTML5与FLASH 分片、并发预览、压缩多途径添加文件 MD5验证引入文件虽然官方没说必须要引入JQuery...

xbynet 2019-08-29 12:27 评论0 收藏0
WebUploader上传插件使用说明

摘要：否则强制转换成指定的类型。是否要分片处理大文件上传还有其他配置项上传事件选择需要上传的文件后，文件就会加入文件队列，并触发事件上传进度回调事件，在文件上传中，多次调用此事件当文件上传成功时触发当文件上传出错时触发。 WebUploader简述具有两套运行时支持：HTML5与FLASH 分片、并发预览、压缩多途径添加文件 MD5验证引入文件虽然官方没说必须要引入JQuery...

罗志环 2019-08-20 15:59 评论0 收藏0
WebUploader上传插件使用说明

摘要：否则强制转换成指定的类型。是否要分片处理大文件上传还有其他配置项上传事件选择需要上传的文件后，文件就会加入文件队列，并触发事件上传进度回调事件，在文件上传中，多次调用此事件当文件上传成功时触发当文件上传出错时触发。 WebUploader简述具有两套运行时支持：HTML5与FLASH 分片、并发预览、压缩多途径添加文件 MD5验证引入文件虽然官方没说必须要引入JQuery...

20171112 2019-08-01 16:41 评论0 收藏0
IE9下的跨域问题小总结

摘要：由于浏览器同源策略，凡是发送请求的协议域名端口三者之间任意一与当前页面地址不同即为跨域最近项目要兼容，找了一些资料，实践了一下，现在总结一下，避免以后踩坑。解决方案，微软在和下给我们提供了来进行解决跨域问题，官方的文档可以在这里看到。由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域最近项目要兼容IE9，找了一些资料，实践了一下，现在总...

Jokcy 2019-08-21 11:38 评论0 收藏0