webform的原生操作图片预览和上传

码农公社  210.net.cn   210= 1024  10月24日一个重要的节日--码农(程序员)节

1.使用input标签进行图片操作,input的标签有一个accept属性,accept 属性只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型,多个属性值使用逗号分隔<input accept="audio/*,video/*,image/*">。 

如果想使用浏览器原生特性实现文件上传(如图片)效果,父级的form元素有个东西不能丢,就是:enctype="multipart/form-data" enctype属性规定在发送到服务器之前应该如何对表单数据进行编码,默认的编码是:”application/x-www-form-urlencoded“。对于普通数据是挺适用的,但是,对于文件什么的,就不能乱编码了,该什么就是什么,只能使用multipart/form-data作为enctype属性值。


html代码:




<div class="detail-item">
                           <form action="" enctype="multipart/form-data" id="formData2">
                               <span class="item-tit" style="margin-top: 22px;">头像</span>
                           <ul class="clearfix list-unstyled pic-list">
                               <li>
                                   <img id="imgName" ms-attr-src="UserData.Files"  style="width: 120px; height: 150px; border-radius: 3px;">
                               </li>
                               <li>
                                   <span class="info"><input id="file" class="filepath" onchange="changepic(this)" type="file" accept="image/*" /></span>
                                   <span class="info"><input type="button" id="uploadbt" ms-click="UploadImage()" style="background-image:url(/ViewV5/JS/jquery.uploadify-v2.1.0/kssc.png); width:75px; height:28px; border:0px; cursor:pointer" /></span>
                                 
                                   <input type="hidden" id="imgPath" ms-duplex="UserData.Files"/>
                               </li>
                           </ul>
                           </form>
                       </div>



2.图片预览

就是替换img的src;而读取URL有filereader 和 URL.createObjectURL 两种预览方式。这两种方式可以获得上传图片的名字(name)




//图片预览
   function changepic() {
       //var reads = new FileReader();
       //var f = document.getElementById('file').files[0];
       //reads.readAsDataURL(f);
       //reads.οnlοad = function(e) {
       //    document.getElementById('imgName').src = this.result;
       //};
       var newsrc = getObjectURL(document.getElementById('file').files[0]);
       document.getElementById('imgName').src = newsrc;
   }
   //建立一?可存取到?file的url
   function getObjectURL(file) {
       var url = null ;
       // 下面函数执行的效果是一样的,只是需要针对不同的浏览器执行不同的 js 函数而已
       if (window.createObjectURL!=undefined) { // basic
           url = window.createObjectURL(file) ;
       } else if (window.URL!=undefined) { // mozilla(firefox)
           url = window.URL.createObjectURL(file) ;
       } else if (window.webkitURL!=undefined) { // webkit or chrome
           url = window.webkitURL.createObjectURL(file) ;
       }
       return url ;
   }



3.图片上传

前端js:



UploadImage: function (e) {
            var ofile = $("#file").get(0).files[0];
            var formData = new FormData();
            if (!ofile) { 
                alert('请上传文件');
                return; 
            }
            var size = ofile.size / 1024 / 1024;
            if (size > 1) {
                alert('文件不能大于1M');
                return;
            }
            formData.append("file", ofile);//这个是文件,这里只是演示上传了一个文件,如果要上传多个的话将[0]去掉
            formData.append("F_ID", $("#F_ID").val());//这个是上传的其他参数
            $.ajax({
                url: '/ViewV5/Base/UploadTX.ashx',
                type: 'POST',
                data: formData,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function (msg) {
                    if (msg) {
                        var obj = JSON.parse(msg);
                        if (obj.success) {
                            $("#imgPath").val(obj.sourceUrl);
                        }
                        top.ComFunJS.winsuccess("操作成功");
                    }
                },
                error: function (msg) {
                    console.log(msg);
                }
            });
        }


后端:上传到网站根目录下,并返回相对路径需要提交表单的时候保存到数据库。



HttpFileCollection files = HttpContext.Current.Request.Files;
            if (files.Count>0)
            {
                UpSaveImg(context,files[0]);
            }
/// <summary>
        /// 新的上传方法
        /// </summary>
        /// <param name="file"></param>
        public void UpSaveImg(HttpContext context,HttpPostedFile file)
        {
            try
            {
                if (file.ContentLength > 1000 * 1024)
            {
                context.Response.Write("{\"statusCode\":\"300\", \"message\":\"文件过大,限制1M以内!\"}");
                return;
            }
            Result result = new Result();
            result.success = false;
            result.msg = "Failure!";
            string tx_path = HttpContext.Current.Server.MapPath(UploadFile);//获取文件上传路径
            TXFileHelper.CreateDir(tx_path);
            string fileName = DateTime.Now.ToString("yyyyMMddhhmmssff") + CreateRandomCode(8);
            file.SaveAs(tx_path + fileName + ".jpg");
            result.success = true;
            result.msg = "sucess";
            result.sourceUrl = tx_path + fileName + ".jpg";
            result.sourceUrl = @"\images" + Regex.Split(result.sourceUrl, "images", RegexOptions.IgnoreCase)[1] ;//图片的相对路径
            //返回图片的保存结果(返回内容为json字符串,可自行构造,该处使用Newtonsoft.Json构造)
            context.Response.Write(JsonConvert.SerializeObject(result));
            }
            catch (Exception ex)
            {
            context.Response.Write(ex.Message.ToString() + ex.StackTrace);
        }



转自https://www.cnblogs.com/qinyi173/p/11545139.html

评论