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.huangshanshimin.com/
