聊⼀聊jquery⽂件上传（⽀持多⽂件上传）
谈到⽂件上传，现在⼀般都⽤现成的组件可以使⽤。PC端的可以使⽤uploadify。针对微⽹站H5也有uploadifive。但是这组件并不能满⾜各种场景的需求，例如：预览 切图 放⼤缩⼩，取消之类的。
普通上传
HTML:
<form action="Upload"method="post" enctype="multipart/form-data">
<input id="File1"name="fileupload" type="file" value="" /><input id="" type="submit" value="上传" />
</form>
服务端：
[HttpPost]
public JsonResult Upload()
{
if (Request.Files.Count > 0)
{
if (Request.Files.Count == 1)
{
HttpPostedFileBase file = Request.Files[0];
if (file.ContentLength > 0)
{
string title = string.Empty;
title = DateTime.Now.ToString("yyyyMMddHHmmss") + "_" + Path.GetFileName(file.FileName);
string path = "../UploadFile/" + title;
随机对照试验随机数字表path = System.Web.HttpContext.Current.Server.MapPath(path);
file.SaveAs(path);
return Json(new { status = true, url = path });
}
}
else
{
string[] urllist = new string[Request.Files.Count];
for (int i = 0; i < Request.Files.Count; i++)
{
HttpPostedFileBase file = Request.Files[i];
if (file.ContentLength > 0)
{
string title = string.Empty;
title = DateTime.Now.ToString("yyyyMMddHHmmss") + "_" + Path.GetFileName(file.FileName);
string path = "../UploadFile/" + title;
path = System.Web.HttpContext.Current.Server.MapPath(path);
file.SaveAs(path);
urllist[i] = path;
}
}
return Json(new { status = true, url = urllist });
}
}
else
{
return Json(new { status = false, url = "",msg="没有⽂件" });
}
return Json(new { status = false, url = "",msg=""});
}
后端代码没什么不同的，⼀直就是如此
主要是前端html，我标记为红⾊字体的属性⼀个都不能少，少⼀个都不可能完成上传
action
作⽤：该属性的值指向要提交到某⼀个页⾯，缺少它会不知道提交给谁
可以提交的页⾯：abc.aspx abc.ashx mvc的控制器⽅法 webapi接⼝以及其他后端处理程序
method
作⽤：该属性的值决定以何种⽅式提交，缺少它会报404
可以取的值：post get put delete
enctype
作⽤：指定类型缺少它在后台接收时⽂件并不会包含进去
可以取的值：multipart/form-data application/x-www-form-urlencoded text/plain 此处必须使⽤ multipart/form-data才能将⽂件传到服务端
name
input file ⾥⾯必须包含name属性才能够将⽂件传递到服务器，具体原因不知道，有兴趣的可以尝试下如果有知道的⿇烦解惑
相信到了这⾥你⼀定可以完成上传⽂件操作了！
⽂件类型筛选
能完成基本的⽂件上传操作之后，我们会对它有更多的要求，⽐如：⽂件筛选
相信⼤家都不愿意让⼈什么类型的⽂件都往服务器上传，万⼀是病毒或者脚本之类的就⿇烦⼤了。于是就开始了对⽂件的类型限制
accept
作⽤：就是⽤来做条件筛选的
取值范围：
图⽚类 image/gif image/jpeg image/png .. 多个类型之间⽤，隔开 如accept="image/gif, image/jpeg"
⽂档类
doc application/msword
css text/css
excel application/vnd.ms-excel
ppt application/vnd.ms-powerpoint
多媒体类
mp3 audio/mpeg
mp4 audio/mp4 video/mp4
使⽤事例
<input id="File1" name="fileupload"accept="image/gif, image/jpeg" type="file" value="" />
⽂件多选
有了⽂件类型限制后 有觉得可以多选是件多么惬意的事情。凭什么桌⾯应⽤可以web就不可以。事实证明 当然可以 ⽽且很简单
multiple="multiple"
在input file 标签中加⼊multiple="multiple"属性 就能愉快的多选⽂件了
现在最新的HTML代码应该是这个样⼦了
<form action="Upload" method="post" enctype="application/x-www-form-urlencoded" >
<input id="File1" name="fileupload" accept="image/gif, image/jpeg" multiple="multiple" type="file" value="" />
<input id="" type="submit" value="上传" />
</form>
来看看效果吧
普通上传⽂件的不⾜
现在的功能已经可以满⾜上传基本需求了，但是事情完了吗？远远没有 因为需求就像是程序员的天敌，就是⼀个字 "改"！这个能做成类似xx界⾯吗？我觉得界⾯还可以再改改...
⼤多时候我们需要上传⽂件成功后知道⽂件的地址或者是⽂件⼤⼩等数据，但是现在可能真没办法处理，因为现在上传成功后是这个样⼦的
这是什么⿁。虽然我服务器端上传成功后确实是要返回⽂件路径和状态，现在也确实返回了 但是
咱能不能不要这么⾚裸裸的显⽰在页⾯上？还有，之前上传的页⾯去哪了jquery ajax上传⽂件后对返回数据做处理
经过⼀番改造之后 HTML代码如下好看网页设计素材图片
1 <form id="uploadForm" action="Upload" method="post" enctype="multipart/form-data">
2 <input id="File1" name="fileupload" accept="image/gif, image/jpeg" multiple="multiple" type="file" value="" />
3 <input id="btnImportOK" type="button" value="上传" />
4 </form>
5<script src="~/Scripts/jquery-1.8.3.min.js"></script>
6 <script type="text/javascript">
7
8
9
10
11
12 $(document).ready(function () {
13 $("#btnImportOK").click(function () {
14
15 var formData = new FormData($("#uploadForm")[0]);
16 $.ajax({
17 type: "POST",
18 data: formData,
19 url: "/Home/Upload",
20 contentType: false,
21 processData: false,
22 }).success(function (data) {
23if (data.status) {
24 console.log(data.url);
25 } else {
26 console.log(data.msg);
27 }
28
29 }).error(function (data) {
30 alert(data);
31 console.log(data);
32 });
33
34 });
35 });
36 </script>
执⾏结果
从打印结果可以看到，多⽂件上传已经成功 并且能够做逻辑控制了
这⾥有2点必须特别说明
1.Jquery版本
从第15⾏html代码可以看到
var formData = new FormData($("#uploadForm")[0]);
data传递过去的参数是formData 但是FormData这个类是jquery版本⽐较⾼的⽂件中才会有 所以我这⾥引⽤的是jquery1.83 之前asp mvc模板默认给我安装的是jquery1.10.2的版本，是不⽀持的
2.$("form").serialize()
之前也查看⽹上资料 都推荐⽤它来上传⽂件，于是就写成了这样
$.ajax({
type: "POST",
data: $("#uploadForm").serialize(),h5个人博客模板
url: "/Home/Upload",
contentType: false,
processData: false,
}).success(function (data) {
if (data.status) {
console.log(data.url);
} else {
console.log(data.msg);
}
}).error(function (data) {
alert(data);
console.log(data);
});
});
但是后台⼀直没有接收到⽂件，然后经过⼀番努⼒搜索资料翻答案，原来⽂件⽆法被serialize()序列化，最后推荐⽤FormData
图⽚尺⼨限制
啥也不说了 奉上代码
<img id="picshow" width="200" height="200" src="" />
<form id="uploadForm" action="Upload" method="post" enctype="multipart/form-data">
<input id="File1" name="fileupload" accept="image/gif, image/jpeg" multiple="multiple" type="file" value="" />
<input id="btnImportOK" type="button" value="上传" />
</form>
<script src="~/Scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnImportOK").click(function () {
var formData = new FormData($("#uploadForm")[0]);
$.ajax({
type: "POST",
data: formData,
url: "/Home/Upload",
contentType: false,
processData: false,
}).success(function (data) {
if (data.status) {
安卓app签名是什么// 记录当前时间戳
var start_time = new Date().getTime();
/
/ 创建对象
var img = new Image();
// 改变图⽚的src
// img.src = data.url; 此处注释是因为上传保存是路径是本地磁盘浏览器被阻⽌访问所以⽤了⼀个远程图⽚ img.src = "a0.att.hudong/05/23/01300000727181126443238971302.jpg";
// 定时执⾏获取宽⾼
var check = function () {
console.log(img.width);
// 只要任何⼀⽅⼤于0
// 表⽰已经服务器已经返回宽⾼
if (img.width > 0 || img.height > 0) {
clearInterval(set);
if (img.width > 210 || img.height > 210 || img.width < 190 || img.height < 190) {
alert('建议列表图⽚尺⼨为200*200');
entanglereturn;
jquery下载超大文件}
$("#picshow").attr("src", img.src);
$("#picshow").show();
}
};
var set = setInterval(check, 40);
} else {
console.log(data.msg);
}
}).error(function (data) {
alert(data);
console.log(data);
});
});
$("#picshow").hide();
});
</script>
总结
这次⽂件上传就讲到这⾥吧。没有什么原理性和有深度的东西，就是教程。原谅才疏学浅，后⾯会越来越好的。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论