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

上传域监听拖拽的三个事件:dragEnterdragOverdrop,分别对应拖拽至、拖拽时和释放三个操作的处理机制,当然你也可以监听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文件,只允许访问指定扩展名的文件。
  • 将上传后的文件生成一个随机的文件名,并且加上此前生成的文件扩展名。
  • 设置上传目录执行权限,避免不怀好意的人绕过如图片扩展名进行恶意攻击,拒绝脚本执行的可能性。
时间: 2024-10-13 21:59:02

Web的几种上传方式总结的相关文章

ASP.NET MVC,文件的两种上传方式

文件类型可以更换,在后台保存的时候更换下保存格式@*视图*@<div id="checkQuestionnaireAdd">    <form id="editform">        <input id="id" type="hidden" name="id" value="0" />        <table class="t1

Spring Boot + Vue 前后端分离,两种文件上传方式总结

在Vue.js 中,如果网络请求使用 axios ,并且使用了 ElementUI 库,那么一般来说,文件上传有两种不同的实现方案: 通过 Ajax 实现文件上传 通过 ElementUI 里边的 Upload 组件实现文件上传 两种方案,各有优缺点,我们分别来看. 准备工作 首先我们需要一点点准备工作,就是在后端提供一个文件上传接口,这是一个普通的 Spring Boot 项目,如下: SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/

Selenium系列(十一) - 针对两种上传文件方式的实现方案

如果你还想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识,需要自己去补充哦,博主暂时没有总结(虽然我也会,所以我学selenium就不用复习前端了哈哈哈...) 首先,将下面html代码保存到一个文件中 后续第一种上传文件方式的代码小案例都是访问此html的 <!DOCTYPE html> <html lang="en">

WEB安全性测试之文件上传漏洞

1.漏洞描述:文件上传漏洞,是指可以利用WEB上传一些特定的文件包含特定代码如(<?php phpnfo;?> 可以用于读取服务器配置信息.上传成功后可以点击) 上传漏洞是指用户上传了一个可执行的脚本文件,并通过此脚本文件获得了执行服务器端命令的能力.文件上传本身是web中最为常见的一种功能需求,关键是文件上传之后服务器端的处理.解释文件的过程是否安全.一般的情况有: 1.上传Web脚本语言,服务器的WEB容器解释并执行了用户上传的脚本,导致代码执行,篡改主页 2.上传Flash策略文件cro

国内各大安卓(Android)市场的上传方式、认领、通过审核有哪些不同,有什么值得注意的地方?

6 个回答 赞同89反对,不会显示你的姓名 唐元鹏,扯淡爱好者 Jc droid.李明亮.知乎用户 等人赞同 作为一个android菜鸟开发者,代码水平不咋样,却练就了一身上传app的本领,大体说一下我的经验.上传每个市场也许会布局不同,但内容大致一样,图标.apk.文字介绍.关键词.截图准备好了,基本每个市场都可以上传.认领每个市场的具体需要的东西有所不同,但是如果有代码截图.公司营业执照(个人的话应该是身份证).app的安装包,基本上都能认领成功,再和客服联系一下妥妥的.审核规则安卓市场:审

web操作文件的上传到服务器 并且读取出来

1.文件的上传-servlet实现文件上传---核心API-DiskFileItemFactory 一.文件上传概述 l  实现web开发中的文件上传功能,需完成如下二步操作: ?    在web页面中添加上传输入项 ?    在servlet中读取上传文件的数据,并保存到本地硬盘中. l  如何在web页面中添加上传输入项? ?    <input type="file">标签用于在web页面中添加文件上传输入项,设置文件上传输入项时须注意: ?    1.必须要设置in

HTTP multipart/form-data 上传方式说明(有8个注意点)

( From: http://home.meegoq.com/home-space-do-blog-uid-17-id-81.html ) HTTP multipart/form-data 上传方式说明 已有 123 次阅读 2010-12-1 11:13 |个人分类:网络学习|关键词:HTTP multipart http上传文件方面的功能使用的协议是rfc1867 (http://www.ietf.org/rfc/rfc1867.txt) 为 http 协议.客户端的浏览器,如 Micros

web.py处理文件上传

1 #coding=utf8 2 import web 3 4 urls = ('/','Home', 5 '/upload', 'Upload') 6 7 app = web.application(urls, globals()) 8 9 class Upload: 10 def GET(self): 11 web.header("Content-Type","text/html; charset=utf-8") 12 return ""&q

在ASP.NET中实现图片、视频文件上传方式

一.图片 1.在前端用<asp:FileUpload ID="UpImgName" runat="server"/>控件 2.在后台.cs中写上 protected void btnSubmit_Click(object sender,EventArgs e) { string strImgPath=string.Empty; string strDateTime=dateTime.Now.Tostring("yyyyMMddhhmmss&qu