web 文件上传的几种方式

时间 2019-12-05

标签 web 文件上传几种方式栏目 HTML 繁體版

原文原文链接

问题

文件上传在WEB开发中应用很普遍。javascript

文件上传是指将本地图片、视频、音频等文件上传到服务器上，能够供其余用户浏览或下载的过程。html

如下总结了常见的文件（图片）上传的方式和要点处理。前端

表单上传

这是传统的form表单上传，使用form表单的input[type=”file”]控件，能够打开系统的文件选择对话框，从而达到选择文件并上传的目的，它的好处是多浏览器兼容，它是web开发者最经常使用的一种文件上传方式。html5

表单的代码以下：java

<form method="post" action="http://uploadUrl" enctype="multipart/form-data">
    <input name="file" type="file" accept="image/gif,image.jpg" />
    <input name="token" type="hidden" />
    <input type="submit" value="提交" /> 
</form>

如下是表单上传几个关键点：android

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的新属性，它规定了可经过文件
上传提交的文件类型ios

上传的触发事件能够是：input[type=”file”]的onChange触发，也能够由一个独立的按钮的onClick使整个表单提交，此时还能够用input[type="hidden"]带一些其它的参数，好比Token来源验证等等。web

Ajax无刷新上传

Ajax无刷新上传的方式，本质上与表单上传无异，只是把表单里的内容提出来采用ajax提交，而且由前端决定请求结果回传后的展现结果，不用像直接表单上传那样刷新和跳转页面。在这里，咱们采用jQuery来做为操做DOM和建立ajax提交的js基础库。ajax

html代码片断以下：windows

 
         < 
         form 
         > 
        
         < 
         input  
         id="file" name="file" type="file" /> 
        
         < 
         input  
         id="token" name="token" type="hidden" /> 
        
         </ 
         form 
         >

javascript代码片断以下：

 
         $( 
         "#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文件的接口跟插件来对接的。

<div id="file_upload"></div>

html部分很简单，预留一个hook后，插件会在这个节点内部建立Flash的object，而且还附带建立了上传进度、取消控件和多文件队列展现等界面。

$(function() {
  $("#file_upload").uploadify({
      auto: true,
      method: "Post",
      width: 120,
      height: 30,
      swf: './uploadify.swf',
      uploader: 'http://uploadUrl',
      formData: {
          token: $("#token").val()
      },
      fileObjName: "file",
      onUploadSuccess: function(file, data, response){
          // 根据返回结果指定界面操做
      }
  });
});

关于jQuery.uploadify能够访问了解： http://www.uploadify.com/documentation/ 。值得注意的是flash并不适合手机端应用，更好的解决方案是使用flash+html5来解决平台的兼容性问题。

截图粘贴上传

咱们发现如今有好多上传应用已经提供了截图粘贴上传功能，如WebUploader，它就支持QQ截图而后粘贴上传。

首先，截图粘贴上传的核心思想是，监听粘贴事件，而后获取剪切板中的数据，若是是一张图片，则触发上传事件。

代码片断以下：

$("textarea").on("paste", function(e){
   e.stopPropagation();
   var self = this;
   var clipboardData = e.originalEvent.clipboardData;
   if (clipboardData.items.length <= 0) {
       return;
   }
   var file = clipboardData.items[0].getAsFile();
   if (!file) {
       return;
   }
   var formData = new FormData();
   formData.append("file", file);
   formData.append("token", $("#token").val());
   $.ajax({
       url: "http://uploadUrl",
       type: "POST",
       data: formData,
   }).done(function(response) {
       // 根据返回结果指定界面操做
   });
   e.preventDefault();
});

从上面代码能够看出，上传的过程都是同样的，主要是获取文件的方式。当进行粘贴（右键paste/ctrl+v）操做时，触发剪贴板事件’paste’，从系统剪切板获取内容，而系统剪切板的数据在不一样浏览器保存在不一样的位置：

IE内核：windows.clipboardData
其它：e.originalEvent.clipboardData

拖拽上传

拖拽上传的方式，支持的浏览器比较少，由于它用到了HTML5的两个新的属性（API）一个是Drag and Drop,一个是File API。

上传域监听拖拽的三个事件：dragEnter、dragOver和drop，分别对应拖拽至、拖拽时和释放三个操做的处理机制，固然你也能够监听dragLeave事件。

HTML5的File API提供了一个FileList的接口，它能够经过拖拽事件的e.dataTransfer.files来传递的文件信息，获取本地文件列表信息。

File API在HTML5规范中只是草案，在 W3C 草案中，File 对象只包含文件名、文件类型和文件大小等只读属性。但部分浏览器在草案以外提供了一个名为 FileReader 的对象，用以读取文件内容，而且能够监控读取状态，它提供的方法有： “readAsBinaryString” ，”readAsDataURL” ，”readAsText” ，”abort” 等。

代码片断以下：

// dragenter
$("#textarea").on("dragenter", function(e){
    e.preventDefault();
});
// dragover
$("#textarea").on("dragover", function(e){
    e.preventDefault();
});
// drop
$("#textarea").on("drop", function(e){
    e.stopPropagation();
    e.preventDefault();
    var files = e.originalEvent.dataTransfer.files;
    _.each(files, function(file) {
        if (!/^image*/.test(file.type)) {
          return;
        }
        var fileReader = new FileReader();
        fileReader.onload = function() {
          //uploadFile(file);
        };
        fileReader.readAsDataURL(file);
    });
});

拖拽上传过程当中的几个关键点：

在drop事件触发后经过e.dataTransfer.files获取拖拽文件列表，在jQuery中是e.originalEvent.dataTransfer.files
拖拽上传仅支持图片，文件对象中file.type标识了文件类型。
因为多是多图拖拽，因此能够遍历图片上传，这里用了Underscore的each方法。
这里用readAsDataURL读取文件内容为二进制文件，你还能够将其转换为Base64方式上传，只是http协议里面存在对非二进制数据的上传大小限制为2M。
上传的过程跟前面的方式相同，即：建立FormData对象并发起Ajax请求。
拍照上传

拍照上传能够是PC上的摄像头拍照上传也能够是手机等移动设备的拍照上传。手机上的拍照上传最多见就是咱们使用微信发照片了。

手机实现拍照上传的代码：

<input type=file accept="image/*">
<input type=file accept="video/*">

ios 有拍照、录像、选取本地图片功能，部分android只有选取本地图片功能。

上传与安全

上传文件时必须作好文件的安全性，除了前端必要的验证，如文件类型、后缀、大小等验证，重要的仍是要在后台作安全策略。

这里我列举几个注意点：

后台须要进行文件类型、大小、来源等验证
定义一个.htaccess文件，只容许访问指定扩展名的文件。
将上传后的文件生成一个随机的文件名，而且加上此前生成的文件扩展名。
设置上传目录执行权限，避免不怀好意的人绕过如图片扩展名进行恶意攻击，拒绝脚本执行的可能性。

分类: 文件上传