html表单中构建文件上传的标签,前端文件上传基础

上传文件已经是个已经成熟的前端技术，目前开源的拿来即用的前端上传插件也比较多，诸如:Web Uploader、JSAjaxFIleUploader、

jQuery-File-Upload，通常这些上传插件包含的功能有：选择上传、支持拖拽、MD5校验、图片预览、上传进度显示等功能；

这篇文章主要温习一下前端上传控件的功能实现原理，以及上传功能如何做到功能的渐进式增强。

文件上传方式

文件上传最原始的方式form元素表单提交，发展后form原始+iframe实现异步文件上传，到后来HTML5出现ajax实现文件上传。所以通常上传控件向下兼容的方案通常是高版本浏览器采用ajax方式，低版本浏览器采用iframe+form表单形式。

form表单提交

提交

form表单属性中action属性规定后端处理文件上传的路径；method属性规定上传文件的方法post or get；enctype属性规定在发送到服务器之前应该如何对表单数据进行编码，在使用包含文件上传控件的表单时必须使用“multipart/form-data”。

iframe封装form表单

使用form元素比较简单，但缺点也比较明显：上传同步、上传完成页面会刷新；

在HTML5出现之前，想要实现文件异步上传，只能通过iframe+form实现;

实现方式

原理:文件上传时在页面中动态创建一个iframe元素和一个form元素，并将form元素的target属性指向动态创建iframe元素。当用户完成选择文件动作时，提交子页面中的 form。这时，iframe跳转，而父页面没有刷新。这使得上传结束后，服务器处理结果返回到动态iframe窗口而没有刷新页面；

var createUploadForm = function (id, fileElementId) {

//create form

var formId = 'jUploadForm' + id;

var fileId = 'jUploadFile' + id;

var form = $('

');

var oldElement = $('#' + fileElementId);

var newElement = $(oldElement).clone();

$(oldElement).attr('id', fileId);

$(oldElement).before(newElement);

$(oldElement).appendTo(form);

$(form).css('position', 'absolute');

$(form).css('top', '-1200px');

$(form).css('left', '-1200px');

$(form).appendTo('body');

return form;

}

var createUploadIframe = function (id) {

//create frame

var frameId = 'jUploadFrame' + id;