在做公司業務的時候，需要上傳圖片，之前還真沒使用過，現在在這里先留下方法。
其實很簡單，先看前端，就是使用的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為需要保存的路徑。