标签：
一、本文要写的是楼主在项目中实际使用的案例，非常具有可操作性，可以说是拿来就用，好，废话少直接上代码。
第一步：当然是要引用一些js和css
<script src="/Content/js/lib/jquery/jquery-1.8.0.min.js" type="text/javascript"></script> <script src="/Content/js/lib/Form/3.36.0/Form.js" type="text/javascript"></script> <link href="/Content/js/lib/uploadify/uploadify.css" rel="stylesheet" type="text/css" /> <script type=‘text/javascript‘ src=‘/Content/js/lib/uploadify/jquery.uploadify-3.2.js‘></script>
第二步：
1.HTML代码：
<input type="hidden" value="@hidpath" id="hidPath" name="hidPath" /> <input type="file" name="fupImage" id="uploadImg" /> <span>类型可以是.jpg .png 尺寸要大于 600*600</span> <p> <img id="ImgView" style="width: 150px; height: 100px;" src="@ImageUrl" alt="图片预览" /> </p>
2.js代码：
$(function () { //上传图片 $(‘#uploadImg‘).uploadify({ ‘buttonText‘: ‘选择图片‘, ‘buttonClass‘: ‘browser‘, ‘width‘: 90, ‘height‘: 25, ‘formData‘: { ‘folderName‘: "Present" }, //发送给后台的其他参数通过formData指定 ‘fileObjName‘: ‘file‘, //文件对象名称，用于服务器获取 默认 Filedata ‘fileTypeExts‘: ‘*.jpg;*.png;‘, ‘swf‘: ‘/Content/js/lib/uploadify/uploadify.swf‘, ‘uploader‘: ‘/Help/UploadImages/‘, // ‘uploadLimit‘ : 1,//上传数限制 ‘multi‘: false,//是否上传多个文件 ‘onUploadSuccess‘: function (file, data, response) { var handleResult = JsonEval(data); if (parseInt(handleResult.StatsCode) === 200) { $("#txtImagePath").val(handleResult.Message); //要入库的路径 var imgpath = $("#hidPath").val() + handleResult.Message; $("#ImgView").attr("src", imgpath); //图片预览 } else { layer.alert(handleResult.Message, 2, "提示"); } } }); });
注：上面有个JsonEval方法是把字符串转化为json格式，layer是一个插件
//把string转化为json数据 function JsonEval(jsonObj) { var str = ""; try { str = eval(jsonObj); } catch (err) { str = eval("(" + jsonObj + ")"); } return str; }
3.后台代码，我是用.net C#开发
/// <summary> /// 上传图片(编辑器用 /// </summary> /// <returns></returns> public ActionResult UploadImage_editor() { HttpPostedFileBase file = Request.Files["flUpload"]; HandleResult hr = new HandleResult();//定义返回结果类 if (file == null || file.FileName == "") { hr.StatsCode = 500; hr.Message = "请选择图片"; return Content(JsonConvert.SerializeObject(hr)); } //转化为二进制流 System.IO.BinaryReader br = new System.IO.BinaryReader(file.InputStream); //转化为字节流 Byte[] bytes = br.ReadBytes((int)file.InputStream.Length); br.Close(); Random random = new Random(DateTime.Now.Millisecond);//随机数对象 string extend = System.IO.Path.GetExtension(file.FileName).ToUpper();//扩展名 //string newDic = "Present\\month_" + DateTime.Now.ToString("yyMM") + "\\";//新目录 string newDic = "Present\\" + DateTime.Now.ToString("yyyy") + "\\" + DateTime.Now.ToString("MM") + "\\";//新目录 string newName = DateTime.Now.ToString("ddHHmmssffff") + random.Next(10000).ToString() + extend;//新文件名称 string outMes = string.Empty; string rootDir = SZHomeDLL.ConfigHelper.GetConfigString("ImageFileUploadPath"); string filePath = rootDir + newDic + newName; string target = newName; int result = SZHomeDLL.ImageHelper.UploadImage(bytes, filePath, ref outMes);//只是上次图片的方法，需自己写一下，我是调用dll if (result != 1) { hr.StatsCode = 500; hr.Message = outMes; return Content(JsonConvert.SerializeObject(hr)); } hr.StatsCode = 200; string getImgDir = SZHomeDLL.ConfigHelper.GetConfigString("GetImageFilePath"); hr.Message = getImgDir + "upload/Present/" + DateTime.Now.ToString("yyyy") + "/" + DateTime.Now.ToString("MM") + "/" + target; return Content(JsonConvert.SerializeObject(hr)); }
按以上的步骤去操作就会非常容易，更重要的是不需要太多的测试，因为是楼主在项目里使用的代码。
上面是单图上传，是异步的，下次写一下多图上传，并使用在编辑器中。
行，今天就写到这里，一个个字打要挺难的。
希望能够帮到一下需要的人。
标签：
原文地址：http://www.cnblogs.com/nik2011/p/4530957.html
