Web的几种上传方式总结 | 您所在的位置:网站首页 › js图片上传方法有几种 › Web的几种上传方式总结 |
问题
文件上传在WEB开发中应用很广泛。 文件上传是指将本地图片、视频、音频等文件上传到服务器上,可以供其他用户浏览或下载的过程。 以下总结了常见的文件(图片)上传的方式和要点处理。 表单上传这是传统的form表单上传,使用form表单的input[type=”file”]控件,可以打开系统的文件选择对话框,从而达到选择文件并上传的目的,它的好处是多浏览器兼容,它是web开发者最常用的一种文件上传方式。 表单的代码如下:
以下是表单上传几个关键点: method="post": 采用post方式提交数据 enctype="multipart/form- data":采用multipart格式上传文件,此时request头会显示 Content-Type:multipart/form-data; boundary=—-WebKitFormBoundaryzr34cwJ67R95KQC9 action:标明上传的服务端处理地址 type="file":使用input的file控件上传 如果是多文件批量上传,可以将input[type=”file”]的name属性设置为如:name=”file[]” accept属性是HTML5的新属性,它规定了可通过文件 上传提交的文件类型 上传的触发事件可以是:input[type=”file”]的onChange触发,也可以由一个独立的按钮的onClick使整个表单提交,此时还可以用input[type="hidden"]带一些其它的参数,比如Token来源验证等等。 Ajax无刷新上传Ajax无刷新上传的方式,本质上与表单上传无异,只是把表单里的内容提出来采用ajax提交,并且由前端决定请求结果回传后的展示结果,不用像直接表单上传那样刷新和跳转页面。在这里,我们采用jQuery来作为操作DOM和创建ajax提交的js基础库。 html代码片段如下: 1 2 3 4
javascript代码片段如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 $( "#file" ).on( "change" , function (){ var formData = new FormData(); formData.append( "file" , $( "#file" )[0].files); formData.append( "token" , $( "#token" ).val()); $.ajax({ url: "http://uploadUrl" , type: "POST" , data: formData, processData: false , contentType: false , success: function (response){ // 根据返回结果指定界面操作 } }); });
我们使用了file控件的change来触发上传事件,当然你也可以使用某个按钮来触发表单提交。提交数据时,用到了FormData对象来发送二进制文件,FormData构造函数提供的append()方法,除了直接添加二进制文件还可以附带一些其它的参数, 作为XMLHttpRequest实例的参数提交给服务端。 使用jQuery提供的ajax方法来发送二进制文件,还需要附加两个参数: processData: false // 不要对data参数进行序列化处理,默认为true contentType: false // 不要设置Content-Type请求头,因为文件数据是以 multipart/form-data 来编码 Flash上传很多时候上传的需求要求显示上传进度、中断上传过程、大文件分片上传等等,这时传统的表单上传很难实现这些功能,于是产生了使用Flash上传的方式,它采用Flash作为一个中间代理层,代替客户端跟服务端通信,此外,它也对客户端的文件选择方面拥有更多的控制权,比input[type=”file”] 要大得多。 在这里我使用了jQuery封装好的uploadify插件来进行演示,一般这类插件都自带了上传用的Flash文件,因为跟服务端回传的数据和展示跟客户端的交互,都是Flash文件的接口跟插件来对接的。
html部分很简单,预留一个hook后,插件会在这个节点内部创建Flash的object,并且还附带创建了上传进度、取消控件和多文件队列展示等界面。 ![]() ![]()
关于jQuery.uploadify可以访问了解: http://www.uploadify.com/documentation/ 。值得注意的是flash并不适合手机端应用,更好的解决方案是使用flash+html5来解决平台的兼容性问题。 截图粘贴上传我们发现现在有好多上传应用已经提供了截图粘贴上传功能,如WebUploader,它就支持QQ截图然后粘贴上传。 首先,截图粘贴上传的核心思想是,监听粘贴事件,然后获取剪切板中的数据,如果是一张图片,则触发上传事件。 代码片段如下: ![]() |
CopyRight 2018-2019 实验室设备网 版权所有 |