现在位置首页 / 前端开发 /正文

asp.net+jquery.upload实现多文件上传+进度条加遮罩层

作者: IT小兵 | 2014年9月3日| 热度:℃ | 评论: |参与:

今天在项目中用到了上传文件,考虑以前我发表那个jquery上传插件:[asp.net服务端+JQuery上传插件Uploadify使用详解]。但是在使用中,遇到一个问题:Uploadify是单个上传成功后,返回成功,而不能够将其他form数据一起提交。于是又找了一个插件:jquery-upload.js。版本还是比较新的。

官方地址:https://github.com/cloudcome/jquery-upload/(已失效)

先看效果图:

                                   

第一个是IE下的效果,第二个是chrome下的效果。

首先介绍一下jquery-upload.js的主要功能:

  1. 使用html5 formData对象和html4的form提交,主要用于多文件同时上传

  2. HTML5中,name值为inputName[](兼容PHP),因为是多文件上传

  3. HTML4中,name值不变,因为是单文件上传

  4. 分别计算各个input的完成、错误、成功回调

  5. 限制数据接收类型为JSON

本demo是基于asp.net作为服务端实现的文件上传,并且加上了进度条和遮罩层。这个几个功能在我其他的文章有提到:

请看:

[jquery插件--进度提示遮罩层插件:jquery-mask]

[asp.net文件/大文件上传需要配置的项目整理]

言归正传,说一下怎么使用jquery-upload.js,在asp.net下实现文件的上传。

首先,代码是分为前端html+js,后台是asp.net的ashx实现的服务端。

1、Html代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jquery 上传文件、多文件上传</title>
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <script src="js/jquery-2.0.3.min.js"></script>
    <script src="js/jquery-upload.js"></script>
    <script src="js/jquery.mask.js"></script>
    <script src="js/jquery-progress.js"></script>
    <style>
        
.progress2 {
	position: relative;
	width: 200px;
	height: 200px;
}
.progress2 span {
	position: absolute;
	left: 0;
	height: 40px;
	top: 30px;
	line-height: 40px;
	text-align: center;
	width: 200px;
	font-size: 30px;
	color: #087BCE;
}
    </style>
</head>
<body>
    <div class="col-sm-8" id="divcontent">
        <div class="panel-body">
            <p>
                <input type="file" class="file hide" name="file" id="file1" accept="image/png,image/jpeg,image/gif" multiple />
                <input type="file" class="file hide" name="file" id="file2" accept="image/png,image/jpeg,image/gif" multiple />
            </p>
            <div class="progress2 text-center" id="canvas">
                <canvas id="progress" width="100" height="100">您的浏览器不支持canvas</canvas>
                <span id="precent">0%</span>
            </div>
            <button id="button" class="btn btn-primary btn-lg" onclick="UploadData();return false;">上传</button>
            <div id="ret" class="alert alert-muted">结果</div>
        </div>
        </div>
        <script>
            var $file1 = $("#file1");
            var $file2 = $("#file2");
            var $files = $(".file");
            var $button = $("#button");
            var $canvas = $("#canvas");
            var $progress = $("#progress");
            var $precent = $("#precent");
            var $ret = $("#ret");
            $progress.progress({
                bgStyle: {
                    lineWidth: 4
                },
                fgStyle: {
                    lineWidth: 4
                },
                step: .001,
                onprogress: function (p) {
                    $precent.html((p * 100).toFixed(0) + "%")
                }
            });
             
            if (!!$.support.inputFiles) {
                $file1.removeClass('hide');
                $files = $files.eq(0)
            } else {
                $file1.removeClass('hide');
                $file2.removeClass('hide');
            }
            if (!$.support.canvas) $canvas.hide();
            function UploadData() {
                $button.prop("disabled", 1);
                $ret.empty();
                var type = "image"; $progress.progress(0);
                $("#divcontent").openMask('文件正在上传处理中。。。');
                $files.upload({
                    action: "testhandler.ashx",
                    data: {
                        tp: type,
                        Operate: "uploadMedia"
                    },
                    oncomplete: function () {
                        $button.prop("disabled", 0)
                    },
                    onsuccess: function (json) {
                         
                        var ps = '文件上传处理成功。'; $ret.append(ps);
                        $("#divcontent").closeMask('');
                    },
                    onerror: function (json) {
                         
                        var ps = '<p class="text-danger">' + (json.msg || '未知错误') + '</p>';
                        $ret.append(ps);
                        $("#divcontent").closeMask('');
                    },
                    onprogress: function (e) {
                        $progress.progress(e.loaded / e.total)
                    }
                });
            }
        </script>
</body>
</html>

引用jquery及相关的js文件,因为我没有自己定义样式,就使用了bootstrap的样式

调用jquery-upload的方法实现上传:

 function UploadData() {
                $button.prop("disabled", 1);
                $ret.empty();
                var type = "image"; $progress.progress(0);
                $("#divcontent").openMask('文件正在上传处理中。。。');
                $files.upload({
                    action: "testhandler.ashx",
                    data: {
                        tp: type,
                        Operate: "uploadMedia"
                    },
                    oncomplete: function () {
                        $button.prop("disabled", 0)
                    },
                    onsuccess: function (json) {
                         
                        var ps = '文件上传处理成功。'; $ret.append(ps);
                        $("#divcontent").closeMask('');
                    },
                    onerror: function (json) {
                         
                        var ps = '<p class="text-danger">' + (json.msg || '未知错误') + '</p>';
                        $ret.append(ps);
                        $("#divcontent").closeMask('');
                    },
                    onprogress: function (e) {
                        $progress.progress(e.loaded / e.total)
                    }
                });
            }

我们可以看到:

   data: {

                        tp: type,

                        Operate: "uploadMedia"

                    },

也就是我开始说的:支持自定义的参数数据。这和别的上传插件不一样。

插件的详细说明:

插件选项


$('#demo').upload({'选项名称': 选项值});

参数名默认值描述

action""

上传地址。


留空表示提交到当前页面。


headers{}

上传头信息。


默认为空。


datanull

额外传递的data数据,格式为键值对字符串。


name""

优先级如下:


1、设置的name值。


2、读取input的name值。


3、固定为upload。


oncompletefunction

上传完成,无论成功或失败。


this: element


arguments[0]: data|jqXHR


arguments[1]: textStatus


arguments[2]: jqXHR|errorThrown


onsuccessfunction

上传成功。


this: element


arguments[0]: data


arguments[1]: textStatus


arguments[2]: jqXHR


onerrorfunction

上传失败。


this: element


arguments[0]: jqXHR


arguments[1]: textStatus


arguments[2]: errorThrown


onprogressfunction

上传进度。


this: element


arguments[0]: event



2.2、插件方法


$('#demo').upload('方法名', 方法参数);

方法名参数描述

blob

arguments[0]: "blob"


arguments[1]: 二进制文件


arguments[2]: 文件名


上传单个二进制文件


jquery-clip支持回调二进制文件,可以用于裁剪图片上传。


files

arguments[0]: "files"


arguments[1]: files对象


上传多个file对象


常用于上传拖拽文件列表


file

arguments[0]: "file"


arguments[1]: file对象


上传单个file对象


常用于上传拖拽单个文件

2、服务端接收到传递来的文件列表:这里我使用的是一般处理文件.ashx.也可以使用aspx。

这里记得返回格式是json!context.Response.ContentType = "text/json";不然会报错。


 private object uploadMedia()
    {
        string resultdesc = "成功";
        string tp = GetResponse("tp");
        HttpFileCollection files = HttpContext.Current.Request.Files;
        if (files != null && files.Count > 0)
        {
            for (int i = 0; i < files.Count; i++) {
                HttpPostedFile file = files[i];
            string tmpPath = HttpContext.Current.Server.MapPath("/Upload/");
            string fileName = System.IO.Path.GetFileName(file.FileName);
            try
            {
                string severlocalpath = tmpPath + fileName;
                file.SaveAs(severlocalpath); 
            }
            catch (Exception ex)
            {
                 resultdesc= "失败";
            }
            }
        }
        else
        {
            return "没有文件";
        }
        return resultdesc;
    }

好了,完整的代码asp.net+jquery upload 百度网盘下载地址:

链接:http://pan.baidu.com/s/1kTMaZLt 密码:7cfc 

点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询