C# 一般处理程序+jquery.uploadify.js 多文件上传图片/文件

效果图:


首先引入:

    <script src="assets/js/jquery-1.8.2.min.js"></script>
            <!--引入uploadify-->
            <script type="text/Javascript" src="plugins/uploadify/jquery.uploadify.js"></script>
            <link type="text/css" href="plugins/uploadify/uploadify.css" rel="stylesheet" />

HTML代码:

	<table class="table table-bordered table-striped">
				<tbody>

					<tr class="odd gradeC">
						<td>上传图片列表:</td>
						<td style="text-align: left">
							<div id="fileQueue" class="fileQueue" style="width: 670px; height: 100px;"></div>

						</td>
						<td>
							<input type="file" name="file_upload" id="file_upload" /></td>
					</tr>

					<tr class="even gradeX">

						<td colspan="3">

							<p>
								<input type="button" class="btn btn-info" id="btnUpload" οnclick="doUpload()" value="上传" />
								    
       <input type="button" class="btn btn-info" id="btnCancelUpload" οnclick="$('#file_upload').uploadify('cancel')" value="取消" />
							</p>
							<div id="div_show_files"></div>
						</td>
					</tr>
				</tbody>
			</table>


JS代码:

<script type="text/javascript">
				$(function () {
					var guid = '<%=Request["guid"] %>';
            	var type = '<%=Request["type"] %>';
            	if (guid == null || guid == "") {
            		guid = newGuid();
            	}
            	if (type != null) {
            		type = type + '/';
            	}
            	var returnImgUrl = "";
            	$('#file_upload').uploadify({
            		'swf': 'plugins/uploadify/uploadify.swf',              //FLash文件路径
            		'buttonText': '浏  览',                        //按钮文本
            		'uploader': 'uploadhandler.ashx?guid=' + guid, //处理ASHX页面
            		'formData': { 'folder': 'picture', 'isCover': 1 },         //传参数
            		'queueID': 'fileQueue',                        //队列的ID
            		'queueSizeLimit': 999,                          //队列最多可上传文件数量,默认为999
            		'auto': false,                                 //选择文件后是否自动上传,默认为true
            		'multi': true,                                 //是否为多选,默认为true
            		'removeCompleted': true,                       //是否完成后移除序列,默认为true
            		'fileSizeLimit': '0',                          //单个文件大小,0为无限制,可接受KB,MB,GB等单位的字符串值
            		'fileTypeDesc': 'All Files',                   //文件描述
            		'fileTypeExts': '*.jpg;*.png;*.gif;*.bmp',                         //上传的文件后缀过滤器
            		'onQueueComplete': function (queueData) {      //所有队列完成后事件
            			if (queueData.filesQueued > 0) {
            				alert("上传完毕!");
            				alert(returnImgUrl);
            			}
            		},
            		'onError': function (event, queueId, fileObj, errorObj) {
            			alert(errorObj.type + ":" + errorObj.info);
            		},
            		'onUploadStart': function (file) {
            		},
            		'onUploadSuccess': function (file, data, response) {   //一个文件上传成功后的响应事件处理
            			// var data = $.parseJSON(data);//如果data是json格式
            			//var errMsg = "";
            			//	alert(file);
            			returnImgUrl += data;
            			// 	alert(returnImgUrl);
            			if ($.parseJSON(data) == 2) {
            				alert("目录UpLoadImg/Test不存在或名称不对!"); return false;
            			}
            		}

            	});
            });

            function newGuid() {
            	var guid = "";
            	for (var i = 1; i <= 32; i++) {
            		var n = Math.floor(Math.random() * 16.0).toString(16);
            		guid += n;
            		if ((i == 8) || (i == 12) || (i == 16) || (i == 20))
            			guid += "-";
            	}
            	return guid;
            }

            //执行上传
            function doUpload() {
            	$('#file_upload').uploadify('upload', '*');
            }
			</script>
UploadHandler.ashx中代码:

	public class UploadHandler : IHttpHandler
	{

		public void ProcessRequest(HttpContext context)
		{
			context.Response.ContentType = "text/plain";
			context.Request.ContentEncoding = System.Text.Encoding.GetEncoding("UTF-8");
			context.Response.Charset = "UTF-8";
			try
			{
				if (context.Request.Files.Count > 0)
				{
					string goodspath = HttpContext.Current.Server.MapPath("UpLoadImg/Test");  //用来生成文件夹
					if (!Directory.Exists(goodspath))
					{
						Directory.CreateDirectory(goodspath);
					}
					else
					{
						//返回图片路径
						var returnImgUrl = string.Empty;
						//如果上传路径存在
						HttpPostedFile file = context.Request.Files["Filedata"];
						string imgname = file.FileName;
						string imgType = imgname.Substring(imgname.LastIndexOf(".") + 1);
						string quanname = Guid.NewGuid() + "." + imgType;
						string filePath = Path.Combine(goodspath, quanname);
						returnImgUrl = "UpLoadImg/Test/" + quanname + ";";
						file.SaveAs(filePath);
						context.Response.Write(returnImgUrl);
					}
				}
			}
			catch (Exception ex)
			{
			}

		}

 
		public bool IsReusable
		{
			get
			{
				return false;
			}
		}
	}



  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值