jQuery File Upload介绍.............................................. 2

实现基本原理...................................................... 3

什么是XHR？...................................................... 4

最简模型......................................................... 4

XHR响应为Json时IE的下载BUG................................... 5

需要哪些JS？.................................................. 6

jQuery File Upload UI构成元素.................................... 7

全局控制按钮 (必须)............................................ 7

整体上传进度 (可选)............................................ 8

文件显示容器 (必须)............................................ 8

文件预览模板 (必须)............................................ 8

上传后文件回调显示模板 (必须).................................... 9

JS模板引擎....................................................... 9

什么是模板引擎？............................................... 9

模板引擎有什么优势？........................................... 10

tmpl.min.js................................................ 11

上传过程............................................................ 12

PHP文件上传原理................................................. 12

上传过程........................................................ 12

构造函数__construct.......................................... 14

initialize()................................................... 15

post()......................................................... 15

handle_file_upload()........................................... 16

更新进度条.......................................................... 17

获取xhr对象.................................................... 18

jquery.fileupload-ui.js........................................ 18

jQuery File Upload介绍

jQuery File Upload是一个非常优秀的上传组件，主要使用了XHR作为上传方式，并且利用了相当多的现代浏览器功能，所以可以实现诸如多选批量上传、超大文件上传、图片预览、拖拽上传、上传进度显示、跨域上传等功能 (完全无需flash的依赖)

github地址

https://github.com/blueimp/jQuery-File-Upload/

运行截图

图片轮播

实现基本原理

简单的来说，它就是在文件上传的基础上增加了一些其他的功能：利用Canvas to Blob和 canvas显示图片预览。使用video和audio标签来显示音频和视频预览。利用XHR的特性无需刷新Server端就能得到上传文件的信息。

上传本身和普通上传没有区别，都是从tmp文件夹中读取信息，然后移动文件到指定的地方。

至于进度条，则是通过监听XHR的progress事件得到

什么是XHR？

XHR的全称是XMLHttpRequest。XMLHttpRequest对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。当页面全部加载完毕后，客户端通过该对象向服务器请求数据，服务器端接受数据并处理后，向客户端反馈数据。 XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回
Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。XMLHttpRequest 对象是为 AJAX 的 Web 应用程序架构的一项关键功能。

最简模型

来看一下最基本的Demo，没有进度条，也没有缩略图。但是它完成了最核心的功能，无刷新上传。

必须包括以下文件

jQuery核心库，建议使用jQuery
1.8以上版本

js/vendor/jquery.ui.widget.js ： jQuery UI Widget

js/jquery.iframe-transport.js ：扩展iframe数据传输

js/jquery.fileupload.js ： jQuery File Upload核心类

js/cors/jquery.xdr-transport.js 在IE下应载入此文件解决跨域问题

此时只需要加载一个上传按钮

以及一行代码

$('#fileupload').fileupload();

就完成了一个最基本的上传组件。这个最简单的上传组件可以将选中的文件以表单形式提交到data-url约定的URL，同时提供了足够多的设置和基础事件可供扩展。

想要在完成后显示上传的文件信息？

$('#fileupload').fileupload({

url: url,

dataType: 'json',

done: function (e, data) {

$.each(data.result.files, function (index, file) {

$('<p/>').text(file.name).appendTo('#files');

});

}

})

想要加上进度条？只需要再加一个progress属性(这个是显示全部文件上传进度)

progressall: function (e, data) {

var
progress = parseInt(data.loaded / data.total * 100, 10);

$('#progress .bar').css(

'width',

progress + '%'

);

}

当然了既然这里都用到了元素选择器
那么我也得加一个容器来显示progress

</div>

通过点击按钮来上传而不是在File Chooser中选择了文件就立刻上传。

$(function () {

$('#fileupload').fileupload({

dataType: 'json',

add:
function (e, data) {

data.context = $('<button/>').text('Upload')

.appendTo(document.body)

.click(function () {

data.context = $('<p/>').text('Uploading...').replaceAll($(this));

data.submit();

});

done: function (e, data) {

data.context.text('Upload finished.');

}

});

XHR响应为Json时IE的下载BUG

这里需要特别注意的是，由于jQuery File Upload都是采用XHR在传递数据，服务器端返回的通常是JSON格式的响应，但是IE会将这些JSON响应误认为是文件传输，然后直接弹出下载框询问是否需要下载。

解决这个问题的方法是必须将相应的Http Head从

Content-Type:
application/json

更改为

Content-Type: text/plain

需要哪些JS？

既然是以jQuery为基础的，那么肯定需要有jQuery 另外还需要jQueryUI

JS模板引擎用于渲染上传、下载的项目

Load Image 预览图片

图片剪裁需要用到Canvas to Blob plugin

Bootstrap JS 用于响应式设计

图片carousel

Iframe Transport 对于不支持 XHR file 上传的浏览器需要

负责上传必需

上传处理准备预览图 audio预览等

待上传image 生成预览图并剪裁调用canvas.toBlob 绘制预览图

待上传声音文件生成声音试听(audio标签)

待上传声音文件生成视频预览(video标签)

文件检测类型大小数量等

上传UI

设置上传参数路径

jQuery File
Upload UI构成元素

UI的部件都是硬编码的HTML class，无法更改。核心的几个部件为

全局控制按钮 (必须)

<button type="submit"
class="start">Start upload</button>

<button type="reset"
class="cancel">Cancel upload</button>

<button type="button"
class="delete">Delete</button>

</div>

最外层容器为.fileupload-buttonbar，内部包含

文件选择按钮 .fileinput-button (必须)，内部必须包裹一个input:file

开始上传按钮 .start

取消上传按钮 .cancel

删除按钮 .delete

文件勾选按钮 .toggle

整体上传进度 (可选)

</div>

</div>

最外层容器为.fileupload-progress，内部包含

上传进度条容器.progress

上传进度条 .bar

上传进度文本 .progress-extended

文件显示容器 (必须)

文件预览模板 (必须)

{% for (var i=0, file;
file=o.files[i]; i++) { %}

{% if (file.error) { %}

<div
class="error">{%=file.error%}</div>

{% } else { %}

<div
class="size"><span>{%=o.formatFileSize(file.size)%}</span></div>

{% if (!o.options.autoUpload) { %}

<button>Start
Upload</button>

{% } %}

</span>

{% } %}

<span
class="cancel"><button>Cancel</button></span>

</div>

{% } %}

</script>

上传后文件回调显示模板 (必须)

{% for (var i=0, file; file=o.files[i]; i++) { %}

{% if
(file.error) { %}

<div
class="error">{%=file.error%}</div>

<span
class="cancel"><button class="btn btn-block"><i
class="icon-ban-circle"></i>Cancel</span>

{% } else { %}

<div
class="size"><span>{%=o.formatFileSize(file.size)%}</span></div>

<div
class="delete"><button
data-type="{%=file.delete_type%}"
data-url="{%=file.delete_url%}">Delete</button>

</div>

{% } %}

</div>

{% } %}

</script>

JS模板引擎

什么是模板引擎？

什么是模板引擎，说的简单点，就是一个字符串中有几个变量待定。比如

var tpl = 'Hei, my name is <%name%>, and
I\'m <%age%> years old.';

通过模板引擎函数把数据塞进去，

var data = {

"name": "Barret Lee",

"age": "20"

};

var result = tplEngine(tpl, data);

//Hei, my name is Barret Lee, and I'm 20 years
old.

模板引擎有什么优势？

在使用JavaScript进行前端开发的时候，做的最多的事情，除了dealing with dom以外，就是围绕json数据的操作了。而数据操作最麻烦的就是用json生成dom对象了，通常我们会写一堆for, switch, if之类的代码来支持data生成view, 这样的代码一般会像：

var data = [{name: 'Claire', sex: 'female', age:
18, flag: true},

{name:
'Mark', sex: 'male', age: 25, flag: true},

{name:
'Dennis', sex: 'male', age: 32, flag: false},

{name:
'Tracy', sex: 'female', age: 23, flag: true},

{name:
'Wane', sex: 'male', age: 18, flag: true}],

html =
['<ul>'], item;

for (var i = 0, l = data.length; i < l; i++) {

item =
data[i];

if
(item.flag) {

html.push('<li>');

switch
(item.sex) {

case
'male':

html.push('<span style=”color: blue”>');

break;

case
'female':

default:

html.push('<span style=”color: red”>');

break;

}

html.push('name: ' + item.name + ',
age: ' + item.age);

html.push('</span></li>');

}

html = html.push('</ul>').join('');

这样做，随着数据结构越来越复杂很快你就会发现代码越来越臃肿，而且html完全嵌入代码，几乎不可维护。实际上，将展现逻辑同数据分开在服务器端脚本中是很容易的事情，因为服务器端脚本一般都支持模板技术。相信大家对<% %>之类的标记已经熟悉到烦了。模板语言的好处是能用一种灵活、易扩展的方式来将展现标记（如 html）、数据（如json）和控制代码（如javascript）分离。现在也有不少浏览器端用javascript实现的模板引擎，如extjs的xtemplate,jTemplate，TrimPath等。实现的思路都一样：将一段定义好的模板代码,像<% do something %>之类的最后形成为js代码；然后将json data作为这段js代码的输入，最终产生一段需要的文本

tmpl.min.js

Github https://github.com/blueimp/JavaScript-Templates/blob/master/README.md

FileUpload使用的是作者本人开发的模板引擎, 这个引擎非常的轻量，不到1kb，并且同样快速且强大，而且它无需任何库的依赖。兼容像node.js这样的服务端的环境，也可以被RequireJS这样的模块加载工具使用。

添加一个script tag,其type指定为"text/x-tmpl",以及一个唯一的id并将你的模板定义作为这其内容。

<h3>{%=o.title%}</h3>

<p>Releasedunderthe

<ahref="{%=o.license.url%}">{%=o.license.name%}</a>.</p>

<h4>Features</h4>

<ul>

{%for(vari=0;i<o.features.length;i++){%}

<li>{%=o.features[i]%}</li>

{%}%}

</ul>

</script>

这里面的变量o是模板中指向数据的变量。当然了这里的o是可以自己设置的，可以去作者的官方文档中获取查看详情。

创建一个对象作为模板中得数据

var data = {

"title": "JavaScript Templates",

"license": {

"name": "MIT license",

"url": "http://www.opensource.org/licenses/MIT"

"features": [

"lightweight & fast",

"powerful",

"zero dependencies"

]

};

这里的o就是整个Json对象

有了上述代码就可以准备使用JS模板了，通过调用tmpl()函数以及你的模板id就可以生成结果。

document.getElementById("result").innerHTML
= tmpl("tmpl-demo", data);

window.tmpl返回经过模板处理后的HTML语句

<h3>JavaScript Templates</h3>

<p>Released under the <a
href="http://www.opensource.org/licenses/MIT">MIT
license</a>.</p>

<h4>Features</h4>

<ul>

<li>lightweight & fast</li>

<li>powerful</li>

<li>zero dependencies</li>

</ul>

上传过程

UI工作过程

用户点击.fileinput-button选择要上传的文件（多个）

文件选择后，文件信息被整理为数组置入文件预览模板#template-upload

模板引擎循环处理文件信息并生成模板.template-upload

每生成一个模板，模板就被插入到文件显示容器.files的最后。

用户点击上传按钮.start上传，文件信息被转换为XHR请求至服务器端

UI获得服务器端生成JSON响应文件

JSON响应信息也被整理成数组置入回调显示模板#template-download

模板引擎循环处理文件信息并生成模板.template-download

每生成一个模板，会将此模板替换对应的.template-upload部分

PHP文件上传原理

在PHP中，文件上传功能是使用PHP提供的文件函数来实现的。PHP的文件上传实际上是移动文件。一旦你选择了一个文件并上传，就会在系统的临时目录中有这么一个文件，然后调用函数将该文件移动到指定的目录就可以了。

要实现文件的上传，需要在表单标签中设置enctype="multipart/form-data"。提交后就可以通过$_FILES来得到相应的文件信息。

比如

那么

$_FILES['userfile']['name']：客户端机器文件的原名称。

$_FILES['userfile']['type']：文件的MIME类型，例如"image/gif"。

$_FILES['userfile']['tmp_name']：文件被上传后在服务端储存的临时文件名。

tmp_name就是待上传的文件的临时文件夹的路径，最后执行

move_uploaded_file ( $file ['tmp_name'], $dest );

上传完毕。

上传过程

在main.js中设置了上传路径为server/php/ 默认请求server/php/下的index.php

这个上传组件还支持很多种不同的服务端，你可以看到server下还有go
python nodejs这几种。

咱们还是先看应用最广泛的php吧。进入server/php下发现index.php只有三句话

error_reporting(E_ALL | E_STRICT);

require('UploadHandler.php');

$upload_handler = new UploadHandler();

很显然UploadHandler是在UploadHandler.php中定义的一个类

构造函数__construct

构造函数定义了一些常量，最后构造函数调用了initialize()。

得到该php脚本相对于localhost所在目录

'script_url' => $this->get_full_url().'/',

'upload_dir' =>
dirname($this->get_server_var('SCRIPT_FILENAME')).'/files/',

上传文件路径(相对于服务器)

'upload_url' =>
$this->get_full_url().'/files/',

针对linux mac OS 设置文件夹权限

'mkdir_mode' => 0755,

根据这个名字获取HTML页面中input中的内容

'param_name' => 'files',

设置跨域访问 *表示允许跨域访问

'access_control_allow_origin' => '*',

规定了允许请求的方法的类型

'access_control_allow_methods' => array(

'OPTIONS',

'HEAD',

'GET',

'POST',

'PUT',

'PATCH',

'DELETE'

允许上传的文件类型这个正则表示的所有后缀的文件都可以

'accept_file_types' => '/.+$/i',

initialize()

根据请求的method调用不同的函数默认情况下会以POST的形式上传

如果你是对某个已经上传的附件删除发送请求的类型将会是DELETE

通过$_SERVER['REQUEST_METHOD']得到请求的类型

上传是以POST的方式，故进入到post()中

post()

根据参数判断是否是删除请求，如果是，则跳转到DELETE中去

if (isset($_REQUEST['_method']) &&
$_REQUEST['_method'] === 'DELETE') {

return $this->delete($print_response);

}

获取待上传的文件的信息，从$_FILES['files']中取数据并存入$upload中

$upload =
isset($_FILES[$this->options['param_name']]) ?

$_FILES[$this->options['param_name']] : null;

得到的$upload格式如下，其中tmp_name就是临时文件的路径

array(5) {

["name"]=>array(1) { [0]=> string(6) "11.PNG"}

["type"]=>array(1) { [0]=> string(9)
"image/png"}

["tmp_name"]=>array(1) { [0]=> string(26) "/private/var/tmp/phpfptIaB"}

["error"]=>array(1) { [0]=> int(0) }

["size"]=>array(1) { [0]=> int(28527) }

}

在得到了文件的基本信息之后就调用handle_file_upload来处理要上传的文件

if
($upload && is_array($upload['tmp_name'])) {

foreach ($upload['tmp_name'] as $index => $value) {

$files[] = $this->handle_file_upload(

$upload['tmp_name'][$index],

$file_name ? $file_name : $upload['name'][$index],

$size ? $size : $upload['size'][$index],

$upload['type'][$index],

$upload['error'][$index],

$index,

$content_range

);

}

handle_file_upload()

获取唯一的文件名, 由于所有的文件都放在files中
不可避免的会出现同名文件

$file->name =
$this->get_file_name($uploaded_file, $name, $size, $type, $error, $index,
$content_range);

比如files中有abc.jpg这个文件，而用户又再次上传了一个名为abc.jpg的文件，通过get_file_name就可以返回abc(1).jpg作为写入的文件名。之后如果由用户再次上传了abc.jpg，该函数将返回abc(2).jpg

检测文件的合法性，

$this->validate($uploaded_file, $file, $error,
$index)

创建上传文件夹并赋予读写权限

if (!is_dir($upload_dir)) {

mkdir($upload_dir, $this->options['mkdir_mode'], true);

}

获取真实的上传路径

$file_path =
$this->get_upload_path($file->name);

格式为files/filename(index).extension

移动文件

move_uploaded_file($uploaded_file,
$file_path);

准备返回文件数据(上传后的文件名，文件大小，以及相对服务器的地址用于下载)

$file->url =
$this->get_download_url($file->name);

if ($this->is_valid_image_file($file_path)) {

$this->handle_image_file($file_path,
$file);

}

最后输出响应，为JSON格式，用于页面中显示文件

{

"files":
[

{

"name": "PNG.png",

"size": 42971,

"type": "image/png",

"url":
"http://localhost/UPLOAD/server/php/files/PNG.png",

"thumbnailUrl":
"http://localhost/UPLOAD/server/php/files/thumbnail/PNG.png",

"deleteUrl":
"http://localhost/UPLOAD/server/php/?file=PNG.png",

"deleteType": "DELETE"

}

]

}

更新进度条

在jQuery 1.5+的版本上，如果通过XMLHttpRequest上传文件，可以通过监听XMLHttpRequest.upload对象的progress事件来查看进度。

只要在$.ajax请求中拿到原始的XMLHttpRequest，然后监听upload对象的progress事件.

获取xhr对象

在jquery.fileuoload.js中绑定progress事件

_initProgressListener: function (options) {

var that
= this,

xhr
= options.xhr ? options.xhr() : $.ajaxSettings.xhr();

if
(xhr.upload) {

$(xhr.upload).bind('progress', function (e) {

......

});

options.xhr = function () {

return xhr;

};

}

jquery.fileupload-ui.js

前面已经提到fileupload-ui是用来操作上传时DOM的更新，其progress就是用来更新每一项上传的进度。

progress: function (e, data) {

if (e.isDefaultPrevented()) {

return false;

}

var
progress = Math.floor(data.loaded / data.total * 100);

if
(data.context) {

data.context.each(function () {

$(this).find('.progress')

.attr('aria-valuenow', progress)

.children().first().css(

'width',

progress + '%'

);

});

}

秒客网

jQuery File Upload

jQuery File Upload介绍

实现基本原理

什么是XHR？

最简模型

XHR响应为Json时IE的下载BUG

需要哪些JS？

jQuery File
Upload UI构成元素

全局控制按钮 (必须)

整体上传进度 (可选)

文件显示容器 (必须)

文件预览模板 (必须)

上传后文件回调显示模板 (必须)

JS模板引擎

什么是模板引擎？

模板引擎有什么优势？

tmpl.min.js

上传过程

UI工作过程

PHP文件上传原理

上传过程

构造函数__construct

initialize()

post()

handle_file_upload()

更新进度条

获取xhr对象

jquery.fileupload-ui.js

相关文章