文件上传在WEB开发中应用广泛。 我们在微博、陌陌上发帖时，经常会用到图片上传功能。
文件上传是指将本地图片、视频、音频等文件上传到服务器，以便其他用户浏览或下载的过程。
明天给大家讲讲常见文件（图片）上传的方法和要点。
表单上传
这是传统的表单上传。 使用form表单的input[type="file"]控件，可以打开系统的文件选择对话框来选择文件并上传。 其目的是兼容多种浏览器。 它是网络开发人员最常用的文件上传形式。
表单的代码如下：
<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>以下是表单上传的一些要点：
Ajax上传无刷新
Ajax无刷新上传方式本质上和表单上传是一样的。 它只是把表单中的内容拿出来，通过ajax提交。 但显示结果是由后端在请求结果返回后决定的。 不需要像直接表单上传那样刷新和跳转。 翻页。 这里，我们使用 jQuery 作为基本的 js 库来操作 DOM 和创建 ajax 提交。
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){
// 根据返回结果指定界面操作
}
});});我们利用文件控制权的变化来触发上传风暴。 事实上，您也可以使用某个按钮来触发表单提交。 提交数据时，我使用FormData对象发送二进制补码文件。 FormData构造函数提供的append()方法不仅直接添加补码文件，还附加了一些其他参数，作为XMLHttpRequest实例的参数提交给服务器。 。
使用jQuery提供的ajax方法发送补码文件，需要添加两个参数：
闪存上传
很多时候上传需求需要显示上传进度、中断上传过程、分批上传大文件等，这时候传统的表单上传很难实现这个功能，于是就形成了使用Flash上传的表单，使用Flash作为中间代理层代替客户端和服务器之间的通信。 此外，它还对客户端的文件选择有更多的控制jquery插件 上传图片，比 input[type="file"] 强得多。
这里我使用jQuery封装的uploadify插件进行演示。 通常这类插件都会附带一个Flash文件进行上传，因为服务器返回的数据以及显示器与客户端的交互都是Flash文件的socket。 通过插件连接。
<div id="file_upload"></div>html部分非常简单。 预留钩子后，插件会在该节点内部创建一个Flash对象，并附带上传进度、取消控制、多文件队列显示等接口。
$(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 的更多信息，请访问：。 值得注意的是，Flash并不适合移动应用。 更好的解决方案是使用flash+html5来解决平台兼容性问题。
截图粘贴上传
我们发现现在很多上传应用都提供了截图粘贴上传的功能jquery插件 上传图片，比如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();});从里面的代码可以看出，上传过程是一样的，主要是获取文件的形式。 当执行粘贴（右键粘贴/ctrl+v）操作时，会触发剪贴板风暴‘粘贴’，从系统剪贴板中获取内容，并且系统剪贴板的数据在不同浏览器中保存在不同的位置：
拖放上传
拖放上传模式支持的浏览器相对较少，因为它使用了HTML5的两个新属性（API），一个是DragandDrop，另一个是FileAPI。
上传域监听到拖拽的三个事件：dragEnter、dragOver、drop，分别对应拖拽、拖拽、释放三个操作的处理机制。 事实上，你也可以监听dragLeave事件。
HTML5的FileAPI提供了FileList套接字，可以通过拖放e.dataTransfer.files来获取本地文件列表信息来传输文件信息。
FileAPI 只是 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);
});});拖拽上传过程中的几个关键点：
照片上传
照片上传可以是PC上的摄像头，也可以是手机等联通设备。 手机上传照片最常见的方式就是我们使用陌陌发送合影。
手机上传照片代码：
<input type=file accept="image/*"><input type=file accept="video/*">iOS有拍照、录制视频、选择本地图片的功能，而有些Android只有选择本地图片的功能。
上传和安全
上传文件时，一定要做好文件的安全性。 不仅是后端必要的验证，比如文件类型、后缀、大小等的验证，后台的安全策略也很重要。
这里有几点需要注意：
原来的：
