码迷,mamicode.com
首页 > 其他好文 > 详细

uploadify实战操作(一)

时间:2015-05-26 17:54:26      阅读:94      评论:0      收藏:0      [点我收藏+]

标签:

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

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

        }

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

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

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

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

 

 

uploadify实战操作(一)

标签:

原文地址:http://www.cnblogs.com/nik2011/p/4530957.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!