⽤jQueryFileUpload做的上传控件demo，⽀持同页⾯多个上传
按钮
需求
有这么⼀个需求，⼀个form有多个⽂件要上传，但⼜不是传统的图⽚批量上传那种，是类似下图这种需求，⼀开始是⽤的swfupload做的上传，但是问题是如果有多个按钮的话，就要写很多重复的代码，于为了代码的简洁所以就开始寻求其他的⽅法，期间试过uploadify，但是由于样式始终调不出来，最后就放弃了，直到发现这么个⼩巧的玩意，jQuery File Upload。
本⽂包含了upload的js实现，html的分析，css的实现等内容，⽂章末尾有git地址
最简运⾏时
官⽹下载的demo有N多js⽂件，⼀⼤堆js⽂件中只有⼏个才是必要的，其他的⽂件都是⼀些⽤不到的功能，只有在你需要的时候才需要引⽤。
<script src="libs.baidu/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="JS/jquery/jquery.iframe-transport.js"></script>
<script src="JS/jquery/jquery.ui.widget.js"></script>
<script src="JS/jquery/jquery.xdr-transport.js"></script>
<script src="JS/jquery/jquery.fileupload.js"></script>
其中iframe那个⽂件是为了进⾏iframe上传，ui⽂件是能选完⽂件⾃动上传的必要⽂件，xdr那个是在ie下才需要的，最后⼀个⽂件是主体
后台代码
新建⼀个ashx的⽂件，这⾥建⽴⼀个uploadHandler.ashx，然后写⼊如下代码，⽤于保存。
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Charset = "utf-8";
HttpPostedFile file = context.Request.Files["files"];
string uploadPath =
HttpContext.Current.Server.MapPath(@context.Request["folder"]) + "\\";
if (file != null)
{
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
file.SaveAs(uploadPath + file.FileName);
//下⾯这句代码缺少的话，上传成功后上传队列的显⽰不会⾃动消失
string newName = file.FileName;
string oldName = file.FileName;
context.Response.Write("{\"newName\": \"" + newName + "\", \"oldName\": \"" + oldName + "\"}");
}
else
{
context.Response.Write("0");
}
}
前台HTML
预览效果
最终的效果如上图所⽰，为了实现这个我们⼀步⼀步来分析。
DIV结构
如上图
1. 作为整个控件的最外层
2. 是按钮
微软中国登录3. 是上传完成后显⽰的⽂件名（上传开始前隐藏）
4. 上传进度百分⽐（上传开始前隐藏）
5. 上传进度条（上传开始前隐藏）
上图后4个div按照顺序写在最外层⾥⾯，然后考虑通过浮动来解决位置的问题，当然也可以⽤绝对定位等⽅法来实现，这⾥选择了浮动。因为要⽤到浮动，这⾥简单解释⼀下浮动的原理
⾸先设置0的宽度是280px
smart是什么意思所以1的宽度就是70+margin-right:8 右侧还有202宽度，左浮动
2的宽度是150px，左浮动
3的宽度不设置，右浮动
4的宽度是200+border:2 ⼀共202宽度，左浮动
然后再设置上传按钮，如果不设置样式，上传按钮是这样的
这样显然是⽼套的样式了，在⽹上了⼀个解决⽅案是这样的
配合这样的样式
就可以做出这个效果了
所以html的代码如下：
View Code
JS部分
基本的upload直接这样就可以了，
$("input[type=file]").fileupload();
源代码全集上传的后台页⾯通过input的data-url来设置，如下图
接下来要处理的是上传进度
通过计算上传的百分⽐设置bar的宽度就可以了
这⾥⽤到的是内置的progressall的⽅法，传递2个参数，第⼀个是e就是sender，通过他到触发的input，然后再⽤jquery去其他的兄弟元素进⾏操作，这⾥是到了progress和bar然后设置他们的宽度
第⼆个参数是data，⾥⾯包含两个内置的变量，⼀个是total，⼀个是loaded，所以就可以计算出百分⽐了
上传完成后显⽰⽂件名，还有给隐藏input赋值，
使⽤的是内置的函数done，done会提供2个参数，第⼀个是e就是sender，我们通过他到对应的input，然后到其他元素进⾏操作
另⼀个参数就是result，在注释⾥已经说明了result如何使⽤了
所以最后的js就是这样
<script type="text/javascript">
function CheckFile(obj) {
var array = new Array('gif', 'jpeg', 'png', 'jpg'); //可以上传的⽂件类型
if (obj.value == '') {
alert("让选择要上传的图⽚!");
return false;
}
else {
var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //这个⽂件类型正则很有⽤：） var isExists = false;
for (var i in array) {
if (LowerCase() == array[i].toLowerCase()) {
isExists = true;
return true;
}
}
if (isExists == false) {
obj.value = null;
alert("上传图⽚类型不正确!");
return false;
}
return false;
}
}
matlab代码免费下载$(function () {
$("input[type=file]").fileupload({
done: function (e, result) {
//done⽅法就是上传完毕的回调函数，其他回调函数可以⾃⾏查看api
//注意result要和jquery的ajax的data参数区分，这个对象包含了整个请求信息
//返回的数据在sult中，假设我们服务器返回了⼀个json对象
//json对象{"newName": "sss", "oldName": "sdf"}
var resultJson = $.sult)
$(e.target).attr("value", wName);
var uploadDiv = $(e.target).parent().parent().parent();
uploadDiv.find(".filestate").show().text(resultJson.oldName);
},
progressall: function (e, data) {
var maxWidth = 200;
var percent = (data.loaded / al * 100).toFixed(2);
var progress = parseInt(data.loaded / al * maxWidth, 10);
var uploadDiv = $(e.target).parent().parent().parent();
jquery下载文件请求uploadDiv.find(".progress").show();
uploadDiv.find(".bar").css("width", progress);
uploadDiv.find(".progresspercent").show().text(percent + "%");
图片生成链接在线生成
}
})
});
</script>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论