uploadify实战操作（一）

 一、本文要写的是楼主在项目中实际使用的案例，非常具有可操作性，可以说是拿来就用，好，废话少直接上代码。

第一步：当然是要引用一些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));

        }

 按以上的步骤去操作就会非常容易，更重要的是不需要太多的测试，因为是楼主在项目里使用的代码。

上面是单图上传，是异步的，下次写一下多图上传，并使用在编辑器中。

行，今天就写到这里，一个个字打要挺难的。

希望能够帮到一下需要的人。

 

 

搜索

复制