ITOO--导入图片（MongoDB）

柔情只为你懂 2022-07-19 01:15 188阅读 0赞

初次做ITOO这个项目，我的任务是实现导入图片（MongoDB）功能，咱们先来熟悉一下它的界面吧。

![Center][]

我们的目的是点击添加文件，上传，提示上传成功！

这是上传成功的界面：

![Center 1][]

可是刚一开始接手，总要弄清这代码是怎么运行的，相关代码在哪里找？他们之间是如何传值的？

于是，调试。。。

我们来看看后台代码吧：

1.点击上传，首先进入MongodbHelpController：

//上传文件
 
 publicvoid Upload()
 
 {
 
 try
 
 {
 
 //设置一次只上传一个文件，值为File
 
 //设置上传多个文件，值为Filedata；
 
 HttpPostedFileBase file = (HttpPostedFileBase)Request.Files["Filedata"];
 
 //获取文件
 
 int nFileLen =file.ContentLength;
 
 
 
 MongoGridFSSettings fsSetting = newMongoGridFSSettings() { Root =fileTable };
 
 MongoGridFS fs = newMongoGridFS(DB, fsSetting);
 
 
 
 byte[] myData = newByte[nFileLen];
 
 file.InputStream.Read(myData, 0, nFileLen);
 
 //调用Write、WriteByte、WriteLine函数时需要手动设置上传时间
 
 //通过Metadata添加附加信息
 
 MongoGridFSCreateOptions option = newMongoGridFSCreateOptions();
 
 option.UploadDate = DateTime.Now;
 
 
 
 //创建文件，文件并存储数据
 
 using (MongoGridFSStream gfs =fs.Create(file.FileName, option))
 
 {
 
 gfs.Write(myData, 0,nFileLen);
 
 gfs.Close();
 
 }
 
 }
 
 catch (Exception e)
 
 {
 
 Response.Write(0);
 
 }
 
 Response.End();
 
 }

2.然后获取前台页面action值，根据获取的action，采取对文件的操作：

publicvoid ProcessRequest()
 
 {
 Init();//initialize themongo
 
 //获取前台页面的action值
 
 string action =Request.Form["action"];
 
 switch (action)
 
 {
 
 case"LIST": GetFileList(); break; //获取文件列表
 
 case"UPLOAD": Upload(); break; //上传文件
 
 case"DELETE": Delete(); break;//删除文件
 
 case"DOWNLOAD": DownFile(); break; //下载文件
 
 }
 
 }

这里是上传，所以action值为UPLOAD。

这个上传和我们以前所做的东西不太一样，这个是用了一个叫MongoDB的插件uploadify实现的，在ITOO中代码这样表示：

**Cshtml中：**

//引用mongo批量上传的插件
 
 <linkhref="../Scripts/uploadify-v3.1/uploadify.css"rel="stylesheet">
 
 <scriptsrc="../../Scripts/uploadify-v3.1/jquery.uploadify-3.1.min.js"></script>
 
 <scriptsrc="../Content/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script>

** 核心代码：**

//上传文件到Mongo
 
 $("#file_upload").uploadify({
 
 'auto': false, //是否自动上传
 
 'buttonText': '添加文件', //按钮显示文本
 
 'successTimeout': 99999, //成功等待时间
 
 'swf': '../../Scripts/uploadify-v3.1/uploadify.swf', //uploadify路径
 
 'uploader': '/MongodbHelp/ProcessRequest', //定义服务器端上传数据处理脚本文件swf的路径
 
 'multi': true, //允许选择多个文件
 
 'fileSizeLimit': '1600MB', //文件最大的大小
 
 'queueSizeLimit': 10, //一次最多可选择的文件数量
 
 'progressData': 'speed', //上传文件显示的样式，进度条
 
 'onSelectError': function (file, errorCode,errorMsg) { //出错提示
 
 switch (errorCode) {
 
 case -100:
 
 alert("上传的文件数量已经超出系统限制的" + jQuery('#file_upload').uploadify('settings', 'queueSizeLimit') + "个文件！");
 
 break;
 
 case -110:
 
 alert("文件[" +file.name + "]大小超出系统限制的" + jQuery('#file_upload').uploadify('settings', 'fileSizeLimit') + "大小！");
 
 break;
 
 case -120:
 
 alert("文件[" +file.name + "]大小异常！");
 
 break;
 
 case -130:
 
 alert("文件[" +file.name + "]类型不正确！");
 
 break;
 
 }
 
 },
 
 'onQueueComplete': function (queueData) { //所有文件被处理完成时触发该事件
 
 getFiles();
 
 alert("文件上传成功！"); 
 
 return;
 
 }, 
 
 }, 
 
 });
 
 
 
 //上传按钮
 
 $("#upload").click(function () {
 
 
 $("#file_upload").uploadify('settings', 'formData', { 'action': 'UPLOAD' });//先传递动态值
 
 $("#file_upload").uploadify('upload', '*');//后上传
 
 });

这是一些基本代码，在实现过程中遇到的问题：点击上传按钮没反应。

找师姐上网查了好多，终于在一片简短的博客中找到了问题所在，原来是因为浏览器没有安装Flash插件，找到这个问题，我们把代码加到了

$("#file_upload").uploadify下，具体如下：

'onFallback':function(){ //Flash无法加载错误 
 alert("您未安装FLASH控件，无法上传！请安装FLASH控件后再试。");

这样在以后上线后，如果遇到同样的问题就不会点不动了。

**拓展：**

关于uploadify，它是一种上传MongoDB的插件，是封装好的，他里面有一些属性，具体请参见[uploadify参数设置，事件，方法，函数详解][uploadify]

**总结：**

刚开始对ITOO的框架学习了一些，之前师哥讲过这样一节课，第二遍学习轻松多了，对这些东西了解之后，开始做分配的任务轻松了很多，调试代码很快就能找到问题，不懂就问吧，每个人接受一个新东西之前都很迷茫，只要相信自己，慢慢就会领悟，加油吧！ITOO正在进行中。。。

[Center]: /images/20220718/c12a06d0dc8b4171afd3312de64276b8.png
[Center 1]: /images/20220718/3ce11bde3e404877999942ad4be89f1b.png
[uploadify]: http://bijian1013.iteye.com/blog/1993144