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

1.利用input标签举行图片操作，input的标签有一个accept属性，accept 属性只能与 配合利用。它规定可以或许通过文件上传举行提交的文件类型，多个属性值利用逗号分隔。

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

html代码：

1. <div class="detail-item">
2. <form action="" enctype="multipart/form-data" id="formData2">
3. <span class="item-tit" style="margin-top: 22px;">头像</span>
4. <ul class="clearfix list-unstyled pic-list">
5. <li>
6. <img id="imgName" ms-attr-src="UserData.Files" style="width: 120px; height: 150px; border-radius: 3px;">
7. </li>
8. <li>
9. <span class="info"><input id="file" class="filepath" onchange="changepic(this)" type="file" accept="image/*" /></span>
10. <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>
12. <input type="hidden" id="imgPath" ms-duplex="UserData.Files"/>
13. </li>
14. </ul>
15. </form>
16. </div>

复制代码

2.图片预览

就是更换img的src；而读取URL有filereader 和 URL.createObjectURL 两种预览方式。这两种方式可以得到上传图片的名字（name）

1. //图片预览
2. function changepic() {
3. //var reads = new FileReader();
4. //var f = document.getElementById('file').files[0];
5. //reads.readAsDataURL(f);
6. //reads.οnlοad = function(e) {
7. // document.getElementById('imgName').src = this.result;
8. //};
9. var newsrc = getObjectURL(document.getElementById('file').files[0]);
10. document.getElementById('imgName').src = newsrc;
11. }
12. //创建一個可存取到該file的url
13. function getObjectURL(file) {
14. var url = null ;
15. // 下面函数实行的效果是一样的，只是必要针对不同的浏览器实行不同的 js 函数而已
16. if (window.createObjectURL!=undefined) { // basic
17. url = window.createObjectURL(file) ;
18. } else if (window.URL!=undefined) { // mozilla(firefox)
19. url = window.URL.createObjectURL(file) ;
20. } else if (window.webkitURL!=undefined) { // webkit or chrome
21. url = window.webkitURL.createObjectURL(file) ;
22. }
23. return url ;
24. }

复制代码

3.图片上传

前端js：

1. UploadImage: function (e) {
2. var ofile = $("#file").get(0).files[0];
3. var formData = new FormData();
4. if (!ofile) {
5. alert('请上传文件');
6. return;
7. }
8. var size = ofile.size / 1024 / 1024;
9. if (size > 1) {
10. alert('文件不能大于1M');
11. return;
12. }
13. formData.append("file", ofile);//这个是文件，这里只是演示上传了一个文件，假如要上传多个的话将[0]去掉
14. formData.append("F_ID", $("#F_ID").val());//这个是上传的其他参数
15. $.ajax({
16. url: '/ViewV5/Base/UploadTX.ashx',
17. type: 'POST',
18. data: formData,
19. async: false,
20. cache: false,
21. contentType: false,
22. processData: false,
23. success: function (msg) {
24. if (msg) {
25. var obj = JSON.parse(msg);
26. if (obj.success) {
27. $("#imgPath").val(obj.sourceUrl);
28. }
29. top.ComFunJS.winsuccess("操作乐成");
30. }
31. },
32. error: function (msg) {
33. console.log(msg);
34. }
35. });
36. }

复制代码

后端：上传到网站根目录下，并返回相对路径必要提交表单的时候生存到数据库。

1. HttpFileCollection files = HttpContext.Current.Request.Files;
2. if (files.Count>0)
3. {
4. UpSaveImg(context,files[0]);
5. }
6. /// <summary>
7. /// 新的上传方法
8. /// </summary>
9. /// <param name="file"></param>
10. public void UpSaveImg(HttpContext context,HttpPostedFile file)
11. {
12. try
13. {
14. if (file.ContentLength > 1000 * 1024)
15. {
16. context.Response.Write("{"statusCode":"300", "message":"文件过大，限制1M以内！"}");
17. return;
18. }
19. Result result = new Result();
20. result.success = false;
21. result.msg = "Failure!";
22. string tx_path = HttpContext.Current.Server.MapPath(UploadFile);//获取文件上传路径
23. TXFileHelper.CreateDir(tx_path);
24. string fileName = DateTime.Now.ToString("yyyyMMddhhmmssff") + CreateRandomCode(8);
25. file.SaveAs(tx_path + fileName + ".jpg");
26. result.success = true;
27. result.msg = "sucess";
28. result.sourceUrl = tx_path + fileName + ".jpg";
29. result.sourceUrl = @"\images" + Regex.Split(result.sourceUrl, "images", RegexOptions.IgnoreCase)[1] ;//图片的相对路径
30. //返回图片的生存结果（返回内容为json字符串，可自行构造，该处利用Newtonsoft.Json构造）
31. context.Response.Write(JsonConvert.SerializeObject(result));
32. }
33. catch (Exception ex)
34. {
35. context.Response.Write(ex.Message.ToString() + ex.StackTrace);
36. }

复制代码

来源：https://www.cnblogs.com/qinyi173/p/11545139.html