[置顶] 利用JQuery上传插件Uploadify实现图片上传MongoDB并预览
引言
最近在项目中遇到这么一个需求就上当客户来报名的时候，需要将客户的照片上传显
示在页面上供客户预览，还得需要将客户的图片保存在MongoDB数据库中，在开始的时候
使用HTML自带的File控件，这样可以轻松的实现图片的上传和预览，但是在向MongoDB数
据库存储的时候遇到了问题，就是我们在火狐浏览器中没有办法获得这张图片的路径，
但是在将图片转换成字节流的时候需要这图片的地址作为参数，所以最后利用JQuery里
面的一个插件再结合File控件共同来完成来完成这个功能，下面给大家分享一下：
前台页面代码：
<table style=" border-spacing:80px;margin-left:-100px">
<tbody>
<tr>
<td>报名人照片：</td>
<td style="width:50px">
<img id="previewImag" name="pic" style="width:150px;height:200px;margin-left:-90px" src="../../Content/images/20140801123950.jpg" />
</td>
</tr>
</tbody>
</table>
<table style=" border-spacing:80px;margin-left:200px;margin-top:-380px">
<tr>
<td>委托书：</td>
<td style="width:50px">
<img id="preview" name="pic" style="width:150px;height:200px;margin-left:-90px" src="../../Content/images/6793504_173507408119_2.jpg" /></td>
</tr>
</table>
<table style="margin-top:-50px">
<tr>
<td>上 传 图 片</td>
<td>
<input id="ApplyPicture" type="file" name="file_upload" hidden="hidden">
@*<input type="file" name="fileToUpload" id="fileToUpload2" multiple="multiple" />
<input type="submit" value="上传" onclick="Upload()"/>
<input type="file" />
<input type="button" value="上传"/>*@
</td>
<td>上传委托书</td>
<td><input id="file_upload" type="file" name="choosing"></td>
</tr>
</table>
我们在前台页面引入了两个image框和两个普通的File控件，界面如下：
js代码如下：
//上传文件的控件
$(document).ready(function () {
$('#file_upload').uploadify({
'swf': '../Content/uploadify.swf', //FLash文件路径
'buttonText': '浏 览', //按钮文本
'width': '100', // 按钮的宽度
'height': '28', // 按钮的高度
'uploader': '/BidTRecordManager/file_upload', //Controller处理地址
//'formData': { 'folder': 'picture' }, //传参数
'fileObjName': 'Filedata',
//'queueID': 'fileQueue', //队列的ID
'queueSizeLimit': 10, //队列最多可上传文件数量，默认为999
'auto': true, //选择文件后是否自动上传，默认为true
'multi': true, //是否为多选，默认为true
//'removeCompleted': true, //是否完成后移除序列，默认为true
// 'fileSizeLimit': '10MB', //单个文件大小，0为无限制，可接受KB,MB,GB等单位的字符串值
'fileTypeDesc': '请选择*.png *.gif文件', //文件描述
'fileTypeExts': '*.png;*.gif;*.jpg', //上传的文件后缀过滤器
'onUploadComplete': function (file) {
$.post("/BidTRecordManager/PhotoName",
{
}, function (result) {
document.getElementById("preview").src = "../../Content/" + result;
});
}
});
$('#ApplyPicture').uploadify({
'swf': '../Content/uploadify.swf', //FLash文件路径
'buttonText': '浏 览', //按钮文本
'width': '100', // 按钮的宽度
'height': '28', // 按钮的高度
'uploader': '/BidTRecordManager/UpApplyPicture', //Controller处理地址
//'formData': { 'folder': 'picture' }, //传参数
'fileObjName': 'Filedata',
//'queueID': 'fileQueue', //队列的ID
'queueSizeLimit': 10, //队列最多可上传文件数量，默认为999
'auto': true, //选择文件后是否自动上传，默认为true
'multi': true, //是否为多选，默认为true
//'removeCompleted': true, //是否完成后移除序列，默认为true
// 'fileSizeLimit': '10MB', //单个文件大小，0为无限制，可接受KB,MB,GB等单位的字符串值
'fileTypeDesc': '请选择*.png *.gif *.jpg文件', //文件描述
'fileTypeExts': '*.png;*.gif;*.jpg', //上传的文件后缀过滤器
'onUploadComplete': function (file) {
$.post("/BidTRecordManager/AppleyPhoto",
{
}, function (result) {
document.getElementById("previewImag").src = "../../Content/" + result;
});
}
});
});
Controller中的代码：
#region 通过js对 基本的file控件进行封装，实现报名人照片上传
<span style="white-space:pre"> </span><pre name="code" class="csharp"> public static string AppleyPhotoName = ""; //定义一个全局变量，存放报名人照片的名称
public static string Name = ""; //定义一个全局变量，存放委托书的照片
public ActionResult UpApplyPicture(HttpPostedFileBase Filedata)
{
#region 对文件信息的完整性进行检验
// 如果没有上传文件||上传文件的文件名为空||上传文件的文件内容为空
if (Filedata == null ||
string.IsNullOrEmpty(Filedata.FileName) ||
Filedata.ContentLength == 0)
{
return this.HttpNotFound();
}
#endregion
#region 将上传文档暂时存到服务器上,方便对文件创建索引
//获得文件名称
string strFileName = System.IO.Path.GetFileName(Filedata.FileName);
//上传文件暂时存放的相对（虚拟）路径
string virtualPath =
string.Format("../Content/{0}", strFileName);
//上传文件暂时存放的绝对路径
//var strPath = this.Server.MapPath(virtualPath);
var strPath = this.Server.MapPath(virtualPath);
AppleyPhotoName = Filedata.FileName;
//将文件保存到该路径下
Filedata.SaveAs(strPath);
//Applicants();
//return View();
//将图片保存在mongoDB数据库中
UpLoad(strPath, AppleyPhotoName);
// #region 关闭数据库连接，删除临时文件
//MongoHelper mgHelper = new MongoHelper();
//mgHelper.CloseMongoDB();
////判断文件是不是存在
//if (System.IO.File.Exists(strPath))
//{
// //如果存在则删除
// System.IO.File.Delete(strPath);
//}
// #endregion
return this.Json(new { });
#endregion
}
#endregion
#region 通过js对 基本的file控件进行封装，实现委托书上传
public ActionResult file_upload(HttpPostedFileBase Filedata)
{
#region 对文件信息的完整性进行检验
// 如果没有上传文件||上传文件的文件名为空||上传文件的文件内容为空
if (Filedata == null ||
string.IsNullOrEmpty(Filedata.FileName) ||
Filedata.ContentLength == 0)
{
return this.HttpNotFound();
}
#endregion
#region 将上传文档暂时存到服务器上,方便对文件创建索引
//获得文件名称
string strFileName = System.IO.Path.GetFileName(Filedata.FileName);
//上传文件暂时存放的相对（虚拟）路径
string virtualPath =
string.Format("../Content/{0}", strFileName);
//上传文件暂时存放的绝对路径
//var strPath = this.Server.MapPath(virtualPath);
var strPath = this.Server.MapPath(virtualPath);
Name = Filedata.FileName;
//将文件保存到该路径下
Filedata.SaveAs(strPath);
//Applicants();
//return View();
//将图片保存在mongoDB数据库中
UpLoad(strPath,Filedata.FileName);
// #region 关闭数据库连接，删除临时文件
//MongoHelper mgHelper = new MongoHelper();
//mgHelper.CloseMongoDB();
////判断文件是不是存在
//if (System.IO.File.Exists(strPath))
//{
// //如果存在则删除
// System.IO.File.Delete(strPath);
//}
// #endregion
return this.Json(new { });
#endregion
}
#endregion
#region 将图片保存在mongoDB数据库中 郑浩 2015年7月11日
public string UpLoad(string fileName, string Photoname)
{
MongoHelper mgHelper = new MongoHelper();
Document doc = new Document();
FileStream fs = null;
fs = new FileStream(fileName, FileMode.Open, System.IO.FileAccess.Read, FileShare.ReadWrite);
Bitmap bt = new Bitmap(fs);
int streamLength = (int)fs.Length;
byte[] image = new byte[streamLength];
fs.Read(image, 0, streamLength);
doc["ID"] = Guid.NewGuid();
doc["Img"] = image;
doc["Name"] = Photoname;
mgHelper.MongoCollection.Save(doc);
return "图片保存呢成功";
}
#endregion
#region 获取委托书照片的名称
/// <summary>
/// 获取照片的名称
/// </summary>
/// <returns></returns>
public string PhotoName()
{
//Response.Write(strPath1);
return Name;
////#region 关闭数据库连接，删除临时文件
//MongoHelper mgHelper = new MongoHelper();
//mgHelper.CloseMongoDB();
////判断文件是不是存在
//if (System.IO.File.Exists(strPath1))
//{
// //如果存在则删除
// System.IO.File.Delete(strPath1);
//}
//#endregion
}
#endregion
#region 获取报名人照片的名称
/// <summary>
/// 获取照片的名称
/// </summary>
/// <returns></returns>
public string AppleyPhoto()
{
//Response.Write(strPath1);
return AppleyPhotoName;
//#region 关闭数据库连接，删除临时文件
//MongoHelper mgHelper = new MongoHelper();
//mgHelper.CloseMongoDB();
////判断文件是不是存在
//if (System.IO.File.Exists(strPath1))
//{
// //如果存在则删除
// System.IO.File.Delete(strPath1);
//}
//#endregion
}
#endregion
感觉这个方法应该不是最简单的一种，因为我们可以看到在我们向MongoDB数据库中存储
的时候，在将图片转换成字节流的过程中，我们首先将图片上传到了服务器上，然后获
得了一个绝对路径后才完成的这个功能，所以希望读者能给予一种新的做法，从而可以
很好优化这个代码。