jquery File upload 的一个例子

1. jquery file upload 下载

jQuery file upload Demo 地址：https://blueimp.github.io/jQuery-File-Upload/

jquery file upload 下载地址：https://github.com/blueimp/jQuery-File-Upload/tags

jquery file upload API 地址：https://github.com/blueimp/jQuery-File-Upload/wiki/API

2. jquery file upload 样式

使用了bootstrap框架，样式可以参考Demo。

自定义的样式：

[html] view plaincopy

print?

<divclass="row fileupload-buttonbar"style="padding-left:15px;">
<divclass="thumbnail col-sm-6">
<imgid="weixin_show"style="height:180px;margin-top:10px;margin-bottom:8px;"src="__PUBLIC__/images/game/game_1.png"data-holder-rendered="true">
<divclass="progress progress-striped active"role="progressbar"aria-valuemin="10"aria-valuemax="100"aria-valuenow="0"><divid="weixin_progress"class="progress-bar progress-bar-success"style="width:0%;"></div></div>
<divclass="caption"align="center">
<spanid="weixin_upload"class="btn btn-primary fileinput-button">
<span>上传</span>
<inputtype="file"id="weixin_image"name="weixin_image"multiple>
</span>
<aid="weixin_cancle"href="javascript:void(0)"class="btn btn-warning"role="button"onclick="cancleUpload('weixin')"style="display:none">删除</a>
</div>
</div>
</div>

需要引入的js、css文件

[html] view plaincopy

print?

<linkhref="__PUBLIC__/css/bootstrap.min.css"rel="stylesheet">
<linkrel="stylesheet"href="__PUBLIC__/css/jquery.fileupload.css">
<linkrel="stylesheet"href="__PUBLIC__/css/jquery.fileupload-ui.css">
<scriptsrc="__PUBLIC__/js/jquery.min.js"></script>
<scriptsrc="__PUBLIC__/js/vendor/jquery.ui.widget.js"></script>
<scriptsrc="__PUBLIC__/js/jquery.fileupload.js"></script>
<scriptsrc="__PUBLIC__/js/jquery.iframe-transport.js"></script>

调用方式：

[html] view plaincopy

print?

$(function() {
$("#weixin_image").fileupload({
url: '__CONTROLLER__/uploadImg',
sequentialUploads: true
}).bind('fileuploadprogress', function (e, data) {
var progress=parseInt(data.loaded / data.total * 100, 10);
$("#weixin_progress").css('width',progress + '%');
$("#weixin_progress").html(progress + '%');
}).bind('fileuploaddone', function (e, data) {
$("#weixin_show").attr("src","__PUBLIC__/"+data.result);
$("#weixin_upload").css({display:"none"});
$("#weixin_cancle").css({display:""});
});
});

url：后台提交的地址

fileuploadprogress：主要是进度条的修改

fileuploaddone：上传结束后执行的操作

3. 后台执行的代码

使用的thinkphp代码，上传代码很简单

[html] view plaincopy

print?

public function uploadImg(){
$upload=new\Think\Upload();// 实例化上传类
$upload->maxSize=3145728;// 设置附件上传大小
//$upload->exts=array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
$upload->rootPath='./Public/Uploads/'; // 设置附件上传根目录
$upload->savePath=''; // 设置附件上传（子）目录
// 上传文件
$info= $upload->uploadOne($_FILES['weixin_image']);
if(!$info) {// 上传错误提示错误信息
//$this->error($upload->getError());
echo 0;
}else{// 上传成功获取上传文件信息
//$this->display('templateList');
echo "Uploads/".$info['savepath'].$info['savename'];
}
}

jquery File upload 的一个例子相关推荐

定制jQuery File Upload为微博式单文件上传
原文链接:http://avnpc.com/pages/single-file-upload-component-by-jquery-file-upload jQuery File Upload是一个 ...
jQuery File Upload
jQuery File Upload的最简模型 jQuery File Upload包含了一堆文件,首先需要弄清楚的是最核心的部分是哪些,根据官方的例子可以知道,一个最简单的jQuery File U ...
php上传漏洞绕过gd库,jQuery File Upload任意文件上传漏洞
事件背景 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个JavaScript代码库(或JavaScript框架).jQuery File Upload一个jQ ...
jquery file upload 后台收到的文件名中文乱码， filename中文乱码
在jQuery File Upload.js文件里,在以下这个js中有个成员叫做 _initXHRData, 是一个function, 在这个function的最后部分有一个if-else分支,如下: ...
jquery file upload ajax上传图片简单使用
为什么80%的码农都做不了架构师?>>> 最近要在做后台的图片上传,要用ajax异步上传图片,原生js实现很难 jquery file upload 插件很轻松就完成了 < ...
jQuery File Upload文件上传
最近在写单文件上传,用jQuery File Upload踩了好多坑,但终于实现了单文件,通过按钮提交. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML ...
jquery file upload 与 uploadify
对于图片上传来说有各种js库来帮助实现此功能,常用的包括uploadify和jquery的file upload这两个库. 1.uploadify实现起来比较简单 http://www.uploadi ...
jQuery plugin 开发的一个例子
测试代码: <html> <script src="jquery_1.7.1.js"> </script> <script>jQue ...
jquery file upload 限制上传文件的格式、大小或图片尺寸
限制文件格式.大小 $("#head").fileupload({url: "/front/user/uploadHead",dataType: 'json', ...
简单的python案例_基于python的最简单jQuery File Upload示例
https://github.c➜ flask-demo tree . ├── app.py ├── static │ ├── 123.txt │ └── file-upload │ ├── angu ...

jquery File upload 的一个例子

1. jquery file upload 下载

2. jquery file upload 样式

3. 后台执行的代码

jquery File upload 的一个例子相关推荐

最新文章

热门文章