webform的原生操作图片预览和上传
程序员文章站
2022-08-06 07:55:52
1.使用input标签进行图片操作,input的标签有一个accept属性,accept 属性只能与 配合使用。它规定能够通过文件上传进行提交的文件类型,多个属性值使用逗号分隔。 ......
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); }
上一篇: 隐藏ASP木马后门的两种方法
推荐阅读
-
javascript实现的图片预览和上传功能示例【兼容IE 9】
-
微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比
-
Vue+UpLoad实现上传预览和删除图片的实践
-
JS和Canvas实现图片的预览压缩和上传功能
-
Vue+UpLoad实现上传预览和删除图片的实践
-
结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传、预览、提交的导入Excel数据操作流程
-
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
-
webform的原生操作图片预览和上传
-
微信小程序实现图片上传、删除和预览功能的方法
-
nodejs 图片预览和上传的示例代码