当前位置:首页 > 前端 > jquery实现网页文件上传(支持多文件上传)

jquery实现网页文件上传(支持多文件上传)

今天给大家说下网站上一个很常见的功能,那就是文件上传,谈到文件上传,现在一般都用现成的组件可以使用。PC端的可以使用uploadify。针对微网站H5也有uploadifive。但是这组件并不能满足各种场景的需求,例如:预览 切图 放大缩小,取消之类的。

jquery

普通上传

HTML:

1
2
3
<form action="Upload" method="post" enctype="multipart/form-data">
    <input id="File1" name="fileupload" type="file" value="" /><input id="" type="submit" value="上传" />
</form>

服务端:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
[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属性才能够将文件传递到服务器,具体原因不知道,有兴趣的可以尝试下 如果有知道的麻烦解惑

相信到了这里你一定可以完成上传文件操作了!

jquery

文件类型筛选

能完成基本的文件上传操作之后,我们会对它有更多的要求,比如:文件筛选

相信大家都不愿意让人什么类型的文件都往服务器上传,万一是病毒或者脚本之类的就麻烦大了。于是就开始了对文件的类型限制

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

使用事例

1
 <input id="File1" name="fileupload" accept="image/gif, image/jpeg" type="file" value="" />

文件多选

有了文件类型限制后 有觉得可以多选是件多么惬意的事情。凭什么桌面应用可以web就不可以。事实证明 当然可以 而且很简单

multiple=”multiple”

在input file 标签中加入multiple=”multiple”属性 就能愉快的多选文件了

现在最新的HTML代码应该是这个样子了

1
2
3
4
<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

jquery ajax上传文件后对返回数据做处理

经过一番改造之后 HTML代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<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) {
                    console.log(data.url);
                } else {
                    console.log(data.msg);
                }
 
            }).error(function (data) {
                alert(data);
                console.log(data);
            });
 
        });
    });
</script>

执行结果

jquery

从打印结果可以看到,多文件上传已经成功 并且能够做逻辑控制了

这里有2点必须特别说明

1.Jquery版本

从第15行html代码可以看到

var formData = new FormData($(“#uploadForm”)[0]);

data传递过去的参数是formData 但是FormData这个类是jquery版本比较高的文件中才会有 所以我这里引用的是jquery1.83 之前asp.net mvc模板默认给我安装的是jquery1.10.2的版本,是不支持的

2.$(“form”).serialize()

之前也查看网上资料 都推荐用它来上传文件,于是就写成了这样

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$.ajax({
                type: "POST",
                data: $("#uploadForm").serialize(),
                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

图片尺寸限制

啥也不说了 奉上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<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) {
                    // 记录当前时间戳
                    var start_time = new Date().getTime();
 
                    // 创建对象
                    var img = new Image();
 
                    // 改变图片的src
                   // img.src = data.url; 此处注释是因为上传保存是路径是本地磁盘 浏览器被阻止访问 所以用了一个远程图片
                    img.src = "http://a0.att.hudong.com/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');
                                    return;
                                }
                                $("#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>

代码总结

这次文件上传就讲到这里吧。没有什么原理性和有深度的东西,就是教程。原谅才疏学浅,后面会越来越好的。

如果我的分享能帮到你,麻烦给点个赞吧!如果发现错误,也请及时拍砖!

  • << Python多线程学习
  • 程序员最值得听的歌曲TOP10 >>
  • 作者:
    除非注明,本文原创:知道91,欢迎转载!转载请以链接形式注明本文地址,谢谢。
    原文链接:http://www.zhidao91.com/jquery-upload/

    相关文章 近期热评 最新文章

    • 怎样在WordPress中安装Google Analytics
      就算你积累了多年网站建设的经验,你都不可能一开始就建一个外观,速度,功能以及转化都很完美的网站。你能做的并且也是各个站长正在做的,无非是通过不断的监测来改进...
    • 怎样在WordPress中安装Google Analytics
      就算你积累了多年网站建设的经验,你都不可能一开始就建一个外观,速度,功能以及转化都很完美的网站。你能做的并且也是各个站长正在做的,无非是通过不断的监测来改进...
    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • ABP开发指南系列教程(2) – 多层架构...
      为了减少复杂性和提高代码的可重用性,采用分层架构是一种被广泛接受的技术。为了实现分层的体系结构,ABP遵循DDD(领域驱动设计)的原则,将工程分为四个层: 展现层(...
    • ABP开发指南系列教程(1) – 入...
      ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。 ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WE...
    • Windows下 JIRA + Agile + Mysql 破解...
      本文讲述了Windows下 JIRA + Agile + Mysql 破解安装示例教程