input图⽚上传的⽅法及回调函数使⽤。
在做公司业务的时候，需要上传图⽚，之前还真没使⽤过，现在在这⾥先留下⽅法。
其实很简单，先看前端，就是使⽤的input=“file"这个属性。
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function save() {
$("#mainform").submit();
}
</script>
</head>
<body>
<form method="post" enctype="multipart/form-data" id="mainform">
<div>
<input type="file" id="file" name="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" />
inputtypefile不上传文件
<input type="button" onclick="save()"  value="上传">
</div>
<div id="imgdiv" >
</div>
</form>
</body>
View Code
后台就使⽤Request.Files接收就⾏了。
var file = Request.Files["file"];//图⽚
但是发现这种⽅式有个缺陷，form提交后没有回调函数。于是在百度后发现有⼈使⽤js.form可以回调，试了⼀下发现可⾏。需要下载jquery.form.min.js
<head>
<meta charset="UTF-8">
<script src="~/Content/jquery.form.min.js"></script>
<script type="text/javascript">
//上传
function submitBtn() {
if ($("#file").val() == "") {
alert("请先选择图⽚")
return;
}
//回调
$("#mainform").ajaxSubmit({
type: "post",
cache:false,
success: function (text) {
$("#ds").val(text);
$("#file").val("");
$("#pic").remove();
}
});
}
function selectFile() {
$("#file").trigger("click");
}
//在div中让图⽚显⽰出来
function getFilePath() {
if (typeof FileReader == "undefined") {
alert("您的浏览器不⽀持FileReader对象！");
}
$("#img").empty();
var oFReader = new FileReader();
var file = ElementById('file').files[0];
console.log(file)
var src = sult;
$("#img").append("<img  id=\"pic\"  src=\"" + src + "\">");
}
}
</script>
<style>
img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<form id="mainform" enctype="multipart/form-data" method="post" >
<div>
<input type="file" id="file" name="file" onchange="getFilePath()" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" />            <input  type="button"      onclick="submitBtn();"  value="点击上传">
<input id="ds"  name="ds"readonly="readonly"/>
</div>
<div id="img" >
</div>
</form>
</body>
View Code
后台依然是使⽤Request.Files接收。然后使⽤
file.SaveAs (FullPath);//上传
进⾏保存，FullPath为需要保存的路径。