webform的原生操作图片预览和上传
<p>1.利用input标签举行图片操作，input的标签有一个accept属性，accept 属性只能与 <code><input type="file"></code> 配合利用。它规定可以或许通过文件上传举行提交的文件类型，多个属性值利用逗号分隔<code><input accept="audio/*,video/*,image/*"></code>。 </p><p>假如想利用浏览器原生特性实现文件上传(如图片)效果，父级的form元素有个东西不能丢，就是：enctype="multipart/form-data" enctype属性规定在发送到服务器之前应该怎样对表单数据举行编码，默认的编码是：”application/x-www-form-urlencoded“。对于普通数据是挺适用的，但是，对于文件什么的，就不能乱编码了，该什么就是什么，只能利用multipart/form-data作为enctype属性值。</p>
<p>html代码：</p>
<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>
<p>2.图片预览</p>
<p>就是更换img的src；而读取URL有filereader 和 URL.createObjectURL 两种预览方式。这两种方式可以得到上传图片的名字（name）</p>
//图片预览
function changepic() {
//var reads = new FileReader();
//var f = document.getElementById('file').files;
//reads.readAsDataURL(f);
//reads.οnlοad = function(e) {
// document.getElementById('imgName').src = this.result;
//};
var newsrc = getObjectURL(document.getElementById('file').files);
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 ;
}
<p>3.图片上传</p>
<p>前端js：</p>
UploadImage: function (e) {
var ofile = $("#file").get(0).files;
var formData = new FormData();
if (!ofile) {
alert('请上传文件');
return;
}
var size = ofile.size / 1024 / 1024;
if (size > 1) {
alert('文件不能大于1M');
return;
}
formData.append("file", ofile);//这个是文件，这里只是演示上传了一个文件，假如要上传多个的话将去掉
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);
}
});
}
<p>后端：上传到网站根目录下，并返回相对路径必要提交表单的时候生存到数据库。</p>
HttpFileCollection files = HttpContext.Current.Request.Files;
if (files.Count>0)
{
UpSaveImg(context,files);
}
/// <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) ;//图片的相对路径
//返回图片的生存结果（返回内容为json字符串，可自行构造，该处利用Newtonsoft.Json构造）
context.Response.Write(JsonConvert.SerializeObject(result));
}
catch (Exception ex)
{
context.Response.Write(ex.Message.ToString() + ex.StackTrace);
}
<p> </p>
<p><div align="center"></div></p>
<p> </p><br><br/><br/><br/><br/><br/>来源：<a href="https://www.cnblogs.com/qinyi173/p/11545139.html" target="_blank">https://www.cnblogs.com/qinyi173/p/11545139.html</a>
页:
[1]