`

Web文件上传方法总结大全

阅读更多

文件上传在WEB开发中应用很广泛,我们经常发微博、发微信朋友圈都用到了图片上传功能。

文件上传是指将本地图片、视频、音频等文件上传到服务器上,可以供其他用户浏览或下载的过程。

今天我给大家聊聊常见的文件(图片)上传的方式和要点处理。

表单上传

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

表单的代码如下:

<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>

以下是表单上传几个关键点:

  • 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代码片段如下:

<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文件,只允许访问指定扩展名的文件。
  • 将上传后的文件生成一个随机的文件名,并且加上此前生成的文件扩展名。
  • 设置上传目录执行权限,避免不怀好意的人绕过如图片扩展名进行恶意攻击,拒绝脚本执行的可能性。
分享到:
评论

相关推荐

    调用WebApi接口上传文件

    总结,通过.NET MVC调用WebApi接口进行文件上传涉及客户端HTML表单的创建、服务器端MVC控制器和WebApi控制器的配置以及文件的接收和处理。在实际项目中,还要注意性能优化、错误处理和安全性检查,以提供稳定可靠的...

    ASP.NET Web API 接收文件上传

    总结起来,ASP.NET Web API提供了一套强大的工具来处理文件上传,结合MIME多部分类型,可以构建健壮的文件上传服务。理解这一过程的关键在于正确解析MIME多部分内容,以及在服务器端安全、有效地处理上传的文件。...

    webApi、MVC、ajax分段上传文件带进度条

    在现代Web应用中,文件上传是一项常见的功能,尤其是在大数据量的场景下,分段上传和进度显示变得尤为重要。本文将详细讲解如何利用WebAPI、MVC框架和AJAX技术实现大文件的分段上传,并结合进度条展示上传进度,以...

    java web文件上传和下载的程序

    本教程将深入探讨如何使用Java实现Web文件上传和下载的程序,这对于初学者理解Web开发的基本流程非常有帮助。 一、文件上传 1. **Multipart请求**:在HTTP协议中,文件上传通常涉及Multipart/form-data类型的请求...

    delphi 上传文件至web服务器

    总结一下,Delphi中实现文件上传至Web服务器的关键点包括: 1. 选择合适的网络组件,如Indy或WinInet。 2. 编写Pascal代码来构建HTTP POST请求,使用TMemoryStream加载文件内容。 3. 设置HTTP请求头,如Content-Type...

    asp net core3.1 webapi 上传功能

    总结,ASP.NET Core 3.1 WebAPI的文件上传功能提供了丰富的API和灵活性,可以满足各种文件上传需求。通过理解并应用上述知识点,你可以创建安全、高效、可扩展的文件上传系统。记得在实际开发中根据项目需求进行调整...

    Webdynpro上载PDF文件

    主要内容包括:创建Webdynpro组件、定义属性、插入文件上传元素、绑定数据属性以及编写上传方法等步骤。 #### 创建Webdynpro组件 1. **进入SE80事务代码**:首先,打开SAP系统,输入事务代码`SE80`,创建一个新的...

    webupload上传与下载文件,web实现文件上传下载,Java

    在IT行业中,文件上传和下载是Web应用中的常见功能,特别是在大数据时代,大文件的断点续传技术显得尤为重要。本教程将详细讲解如何利用WebUploader、SpringBoot和MySQL实现一个支持断点续传功能的文件上传下载系统...

    .net上传文件到web service方法

    - **调用Web Service方法**:通过代理类调用服务器端的文件上传方法,并传递文件数据。 - **处理响应结果**:根据返回的结果进行相应处理。 #### 4. 文件类型识别 - **实现细节**:`GetFileType` 方法根据文件扩展...

    Web中间件常见漏洞总结.pdf

    当IIS服务器的Web服务扩展开启了WebDAV支持,通过特定的请求方式,用户可以向服务器上传并写入任意文件。修复建议: - 关闭WebDAV功能。 - 确保网站目录没有写入权限。 4. IIS短文件名漏洞 Windows系统为了向后兼容...

    通过Web服务上传文件.rar

    在使用SOAP的Web服务中,文件上传可能涉及到创建一个SOAP消息,该消息包含文件的元数据和内容,然后发送到服务器的SOAP端点。SOAP消息具有严格的结构,包括SOAP头部和SOAP体,其中体部可以包含上传文件的数据。 ...

    java web 文件上传进度条源码

    在Java Web开发中,文件...总结,"java web 文件上传进度条源码"涵盖了Java Web开发中的文件上传、进度跟踪、前端交互等多个关键知识点。通过理解并运用这些技术,开发者可以创建出高效且用户体验良好的文件上传功能。

    pythonweb上传下载文件

    总结来说,使用Python和Flask实现文件上传和下载功能并不复杂,但需要考虑到安全性,确保应用的稳定性和用户的数据安全。通过理解这些基本概念,你可以构建出更高级的文件管理系统,满足各种Web应用的需求。

    WEB_文件的上传与下载思维导图总结及所用的包

    总结,Web文件上传与下载涉及前端交互、后端处理、文件存储、安全控制等多个层面,合理的利用各种工具和库,可以构建高效且安全的文件管理系统。对于开发者来说,理解和掌握这些知识点是必要的。

    go gin web框架文件上传,可以使用curl进行上传文件

    总结,Gin框架为Go语言开发Web应用提供了一种高效且易于使用的解决方案,包括文件上传功能。通过Gin的`FormFile`方法,我们可以轻松地接收和处理上传的文件。同时,结合curl命令,我们可以方便地对上传接口进行测试...

    关于文件上传与下载的实现方法总结

    ### 关于文件上传与下载的实现方法总结 在软件开发特别是Web应用开发中,文件的上传与下载是非常常见的功能需求之一。本文将详细介绍文件上传与下载的多种实现方法,并特别聚焦于通过Java语言来实现这些功能的具体...

    VFP上传文件到web服务器

    在本文中,我们将深入探讨如何使用Visual FoxPro(VFP)将文件上传到Web服务器,主要涉及的技术包括XMLHTTP和XMLDOM。这两种技术是VFP与Web服务交互的重要工具,让我们一起详细了解它们。 1. Visual FoxPro(VFP)...

    ASP.NET(C#) Web Api通过文件流下载文件的实例

    总结一下,本实例展示了如何在ASP.NET(C#) Web API中利用文件流实现文件下载。通过创建HTTP响应,设置正确的响应头,并将文件内容作为流发送,我们可以方便地让客户端接收到文件并保存到本地。这种方法简单、高效,...

    libcurl web-uploader 文件分片上传,断点续传

    总结来说,libcurl web-uploader为大文件上传提供了强大的工具,通过文件分片上传和断点续传技术,可以在各种网络环境中实现高效的文件传输。在嵌入式平台如rv1126上,需要充分考虑平台特性,合理配置libcurl参数,...

    java web文件上传

    Java Web文件上传是一个常见的开发需求,它涉及到服务器端接收客户端发送的文件并存储到服务器的特定位置。在Java Web环境中,文件上传可以通过多种框架和技术实现,例如Servlet和Struts2。接下来,我们将深入探讨这...

Global site tag (gtag.js) - Google Analytics