jQuery File Upload 文件上传插件使用一 (最小安装 基本版)
jQuery File Upload 是一款非常强大的文件上传处理插件,支持多文件上传,拖拽上传,进度条,文件验证及图片音视频预览,跨域上传等等。
可以说你能想到的功能它都有。你没想到的功能它也有。。
不过由于功能太强大,使用起来还是需要点基本功,否则调试开发会遇到困难。
本文结合官方教程只介绍最基本的上传功能。
以我目前最新的9.7.1版本
下载下来解压到服务器能访问到的地方。
文件如下:
1. 新建一个文件夹MyDemo或者你随意。
把外面的server和js目录拷贝到里面,注意server目录里面包含gae-go、gae-python、php这些后端语言,只保留php就行。
2. 新建一html,内容如下,主要JS和CSS的路径。还有有时候国内无法访问ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js,可以引用本地的jQuery。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
<style>
.bar {
height: 18px;
background: green;
}
</style>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
$('#fileupload').fileupload({
dataType: 'json', // 上传完成后的执行逻辑
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}, // 上传过程中的回调函数
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$(".bar").text(progress + '%');
$('#progress .bar').css(
'width',
progress + '%'
);
}
});
});
</script> <!-- 进度条 -->
<div id="progress">
<div class="bar" style="width: 0%;"></div>
</div>
</body>
</html>
传统上都是用<form>表单提交上传,现在是纯Ajax。需要注意的input的data-url属性,这就是需要php服务端处理的路径。
浏览器打开,以我的为例 http://localhost/my/JS/Plugins/jQuery-File-Upload-master/MyDemo/
由于是在本地测试,为了看到进度进度效果,建议找个大点的(~1G)文件上传。可以直接拖个文件到浏览器窗口中。
效果如下,上传过程中绿色进度条会不停的增加。
F12打开调试面板,耐心等待上传完成,会看到上传完成后,有ajax返回。
地址类似:http://localhost/my/JS/Plugins/jQuery-File-Upload-master/MyDemo/server/php/
返回的数据是JSON格式,内容类似:
{"files":[{"name":"1409665745-8365","size":1472358262,"type":"multipart\/form-data; boundary=----WebKitFormBoundaryxLzvFFmSOiWiY1Ka","error":"The uploaded file exceeds the post_max_size directive in php.ini"}]}
很明显上传文件太大了,超出php.ini限制。先不改了。
如果我们直接丢个图片进去,返回的json类似:
{
"files": [
{
"name": "10095978136d36c635.jpg",
"size": 12479,
"type": "image/jpeg",
"url": "http://localhost/my/JS/Plugins/jQuery-File-Upload-master/MyDemo/server/php/files/10095978136d36c635.jpg",
"thumbnailUrl": "http://localhost/my/JS/Plugins/jQuery-File-Upload-master/MyDemo/server/php/files/thumbnail/10095978136d36c635.jpg",
"deleteUrl": "http://localhost/my/JS/Plugins/jQuery-File-Upload-master/MyDemo/server/php/?file=10095978136d36c635.jpg",
"deleteType": "DELETE"
}
]
}
来到MyDemo\server\php\files 会发现上传的图片,而且thumbnail目录还保存了裁剪过的图片,这都是官方提供的UploadHandler.php的功劳。
至此,一个拖拽上传文件的Demo完成了。但是功能仍然很弱,比如没有文件类型及大小限制,没有前台的错误提示。
官方提供的API有maxFileSize和acceptFileTypes。这在基本版里是不生效的,在UI版里才可以。具体的完善功能见第二篇
详见 maxFileSize and acceptFileTypes not working #760。
最新文章
- 源码编译安装postgresql
- LLBLGen Pro v4.2_Patch+Keygen
- angularJs项目实战!02:前端的页面分解与组装
- 正确使用Android性能分析工具——TraceView
- 百家搜索:在网站中添加Google、百度等搜索引擎
- (原)调用jpeglib对图像进行压缩
- MYSQL 关闭服务的过程
- Linux 配置脚本 启动服务
- Linux系统之TroubleShooting(故障排除)(转)
- jndi通俗理解以及它的指令缺陷
- 详解Session和cookie
- Codeforces712E
- IOS初级:NSUserDefaults
- 如何将文本编辑器嵌入框架--以Umeditor&;CodeIgniter框架为例
- python 获取环境变量
- Spring3 MVC请求参数获取的几种方法[转载]
- 【python】专用下划线标识符说明
- 【Tomcat-原】如何在Myeclipse中添加本地的Tomcat
- 树形dp(B - Computer HDU - 2196 )
- python之web框架(1):完成静态页面web服务器