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" />
<input type="button" onclick="save()" value="上传">
</div>
<div id="imgdiv" style="height:160px ;width:160px">
</div>
</form>
</body>
后台就使用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 = document.getElementById('file').files[0];
console.log(file)
oFReader.readAsDataURL(file);
oFReader.onloadend = function (oFRevent) {
var src = oFRevent.target.result;
$("#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" style="height:160px ;width:160px" >
</div>
</form>
</body>
后台依然是使用Request.Files接收。然后使用
file.SaveAs (FullPath);//上传
进行保存，FullPath为需要保存的路径。
