前提：领导给了我一个文件夹，里面有4000千多张产品图片，每张图片已产品编号+产品名称命名，要求是让我把4000多张产品图片上传到服务器端，而且要以产品编码创建n个文件夹，每张图片放到对应的文件夹下。
思路：1、开始的思路是将整个文件夹都上传到服务器端，但查找资料获得，FileUpload只能上传文件，不能上传文件夹，从而得出另外一种方案，将文件夹压缩，然后便可以上传到服务器端，然后再服务器端解压，解压之后再去每个文件从新读取并放到对应的文件夹下。思量再三，觉得很是麻烦。
2、第二个思路，文件批量上传，在将文件上传到服务器端对应的文件夹下。感觉思路甚好。再查询资料，发现FileUpload控件的使用中，一个FileUpload控件一次只能选择一个文件，不能同时选择多个文件，果断放弃使用FileUpload上传文件，发现Jquery Uploadify是个不错的选择（注：为了安全，上传文件时是获得不到用户上传文件的本地路径）。
实战：Jquery Uploadify的使用
1、需要的js和css文件
2、添加产品类别的选择，用于向数据库新增数据时区分图片类别，图片类别分三种（1：包装；2：产品；3：标识）
js的引用：
<link href="../js/Uploadify/uploadify.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery-1.6.js" type="text/javascript"></script>
<script type="text/javascript" src="../js/Uploadify/jquery.uploadify.min.js"></script>
前端html代码：
<form id="form1" runat="server">
<div style="position:absolute; top:10px; left:150px; width:500px;">
<%--用来作为文件队列区域--%>
<div id="fileQueue">
</div>
<table style="font-size:15px; font-family:宋体;">
<tr>
<th>产品图片类型：</th>
<td>
<input type="radio" id="rad1" value="" name="radImageflg" checked="checked"/>包装
<input type="radio" id="rad2" value="" name="radImageflg"/>产品
<input type="radio" id="rad3" value="" name="radImageflg" />标识
</td>
</tr>
<tr>
<td>
<input type="file" name="uploadify" id="uploadify" />
<%--<a href="javascript:$('#uploadify').uploadify('upload')">上传</a>| --%>
</td>
<td>
<img src="../images/quxiao.gif" onclick="cancelUpload()" />
</td>
</tr>
</table>
</div>
</form>
效果图：
js代码：
<script type="text/javascript">
//取消上传
function cancelUpload() {
$('#uploadify').uploadify('cancel')
}
$(function () {
$("#uploadify").uploadify({
//指定swf文件
'swf': '../js/Uploadify/uploadify.swf',
//后台处理的页面
'uploader': 'PicUploadHandler.ashx',
//按钮显示的文字
'buttonText': '上传图片',
//显示的高度和宽度，默认 height 30；width 120
//'height': 15,
//'width': 80,
//上传文件的类型 默认为所有文件 'All Files' ; '*.*'
//在浏览窗口底部的文件类型下拉菜单中显示的文本
'fileTypeDesc': 'Image Files',
//允许上传的文件后缀
'fileTypeExts': '*.gif; *.jpg; *.png',
//发送给后台的其他参数通过formData指定
//'formData': { 'opt': 'upload', 'imageflg': $('input:radio[name="radImageflg"]:checked').val() },
//上传文件页面中，你想要用来作为文件队列的元素的id, 默认为false 自动生成, 不带#
//'queueID': 'fileQueue',
//选择文件后自动上传
'auto': true,
//设置为true将允许多文件上传
'multi': true,
'queueSizeLimit': "",
'onUploadStart':function(file){
var data = {};
data.opt = 'upload';
data.imageflg = $('input:radio[name="radImageflg"]:checked').val();
$("#uploadify").uploadify('settings', 'formData', data);
},
'onUploadSuccess': function (file, data, response) { //当文件上传成功时触发
if (data) {
if (data.indexOf("error") != -) {
alert("上传失败:" + data);
}
}
},
'onUploadError': function (file, errorCode, errorMsg) {
alert("上传失败:" + errorMsg);
this.settings.removeCompleted = false;
}
});
}); </script>
说明：uploadify参数：swf：swf在下载的文档中就可以找到，路径一定要正确，否则不能打开选择文件的窗口；
动态传递参数：用户选择的图片类别，图片上传时，将图片类别传到后台，在页面加载的时候就直接加了Uploadify的相关参数设置，所以不能在Uploadify中传递参数，如何动态传递参数呢？
在页面此时就用到了'onUploadStart'方法，当开始上传时调用该方法，使用的方法是设置uploadify的formData参数
'onUploadStart':function(file){
var data = {};
data.opt = 'upload';
data.imageflg = $('input:radio[name="radImageflg"]:checked').val();
$("#uploadify").uploadify('settings', 'formData', data);
}
一般处理程序：
/// <summary>
/// 上传文件
/// </summary>
/// <param name="context"></param>
private void UploadFile(HttpContext context)
{
//接收上传后的文件
HttpPostedFile file = context.Request.Files["Filedata"];
int imageflg = context.Request["imageflg"] != null ? int.Parse(context.Request["imageflg"].ToString()) : -;
if (imageflg == - || file == null)
{
context.Response.Write("参数有错");
}
else
{
//获取文件的保存路径
string filePath = HttpContext.Current.Server.MapPath(@"~/JTERPIMG");
//判断上传的文件是否为空
if (file != null)
{
try
{
string res = (new ERPCLB.BLL.BasicData.PicUploadBLL()).UploadPic(file, filePath, imageflg);
context.Response.Write(res);
}
catch (Exception ex)
{
context.Response.Write("error:错误图片名称：" + file.FileName + ";" + ex.Message);
}
}
else
{
context.Response.Write("没有检测到要上传的文件");
}
}
}
后台代码：
/// <summary>
/// 导入图片并新增数据
/// </summary>
/// <param name="file">上传的文件信息</param>
/// <param name="filePath">文件路径</param>
/// <param name="imageflg">文件类型（1：包装；2：产品；3：标识）</param>
/// <returns></returns>
public string UploadPic(HttpPostedFile file, string filePath, int imageflg)
{
PicUploadDAL dal=new PicUploadDAL();
string fileName = file.FileName; //string fileName = "0000002 2 副箱中间轴焊接总成1"; string itemno = fileName.Substring(, ); //截取前7位获得产品编码
//string imageflg = fileName.Substring(itemno.Length, 1); //获得图片类型 int lined = dal.GetLineByItemno(itemno);//获得该产品图片的最大项号
#region 上传图片
//上传图片
filePath = Path.Combine(filePath, itemno); //服务器端图片路径
if (!Directory.Exists(filePath)) //如果目录不存在，则新建
{
Directory.CreateDirectory(filePath);
}
file.SaveAs(filePath + "\\" + fileName);//保存文件
#endregion #region 对图片重命名
string currFilePath = Path.Combine(filePath, fileName); //上传到服务器端的路径
string sourceFileName = currFilePath;
FileInfo fileInfo = new FileInfo(sourceFileName);
string newName = itemno + "_" + lined + fileInfo.Extension; //重新组织文件名称
currFilePath = Path.Combine(filePath, newName);
//判断重命名的文件是否存在，如果存在，则删除
if (File.Exists(currFilePath))
{
File.Delete(currFilePath);
}
fileInfo.MoveTo(currFilePath);
#endregion if (File.Exists(currFilePath)) //如果该路径下已经存在图片，说明导入成功，导入成功后，向数据库插入数据
{
PicExplorer pic = new PicExplorer()
{
itemno = itemno,
lineid = lined,
filename = newName,
imageflg = imageflg
};
int res = (new PicUploadDAL()).InsertPic(pic);
if (res > )
{
return newName;
}
else
{
return "error";
}
}
else
{
return "error";
} }
}
遇到的问题：
文件上传过程中，不但要将文件保存到服务器端的某个文件夹下，同时还要向数据库中插入数据，一开的想法是文件上传成功之后，向数据库中插入数据，也就是说放到"OnUploadSuccess"事件中，在使用ajax的Post方式调用后台插入数据的方法。但是插入少点图片没有问题，当插入700多张图片时，就会报错（此时我是设置了用户选择文件之后自动上传（auto参数设置为true），而不需要用户手动点击上传按钮。如果设置文件不是自动上传，也就是说用户手动点击了上传按钮之后再上传，估计问题会解决，但未尝试），原因是违反了主键约束，思量再三，感觉是上传成功与调用Post方法时产生冲突，未找到原因。
所以改为另外一种方案，在文件上传的过程中，判断服务器端对应的路径下面是否已经存在该图片，如果存在，则说明上传成功，如果不存在则说明上传失败，失败的话也就不需要再走向数据库插入数据的方法。