导入js
<script src="~/Scripts/ajaxfileupload.js"></script>
cshtml
<style>
#oDiv {
height: 200px;
width: 200px;
border: 1px solid #000;
text-align: center;
margin-bottom: 10px;
}
</style>
<div class="all">
<div id="oDiv">
<img src="" id="showPic" style="height:100%;width:100%" />
</div>
<input type="file" id="oInput" name="file" onchange="upload_cover(this)"/>
<input type="text" id="ImageUrl" name="ImageUrl" placeholder="defaultPath" value="" />
</div>
主要是type="file"的input ,特别注意,它的name="file", 后台接收写的样式一定也要是file
js
function upload_cover(obj) {
//回传后缀
var filePath = $("input[name='file']").val();
var extStart = filePath.lastIndexOf(".");
var ext = filePath.substring(extStart, filePath.length).toUpperCase();
ajax_upload(obj.id, function (data) { //function(data)是上传图片的成功后的回调方法
var isrc = data.relatPath.replace(/\/\//g, '/'); //获取的图片的绝对路径
$('#image').attr('src', basePath + isrc).data('img-src', isrc); //给<input>的src赋值去显示图片
}, ext);
}
//具体的上传图片方法
function ajax_upload(feid, callback, ext) {
if (image_check(feid)) {
$.ajaxFileUpload({
url: "/Company/UploadImage",
secureuri: false,
fileElementId: feid,
dataType: 'json',
data: {fileType: ext},//增加推送的属性
type: 'post',
async: true,
secureuri: false,
success:
function (data) {
alert(data.imagePath);
$("#ImageUrl").val(data.imagePath);
$("#showPic").attr("src", data.imagePath);
},
error:
function (data) {
alert(data);
}
});
}
};
function image_check(feid) { //自己添加的文件后缀名的验证
var img = document.getElementById(feid);
return /.(jpg|png|gif|bmp)$/.test(img.value) ? true : (function () {
modals.info('图片格式仅支持jpg、png、gif、bmp格式,且区分大小写。');
return false;
})();
}
controller
[HttpPost]
public ActionResult UploadImage(HttpPostedFileBase file)
{
//获取图片后缀
string fileType = Request.Form["fileType"];
// 时间
string now = DateTime.Now.ToString("yyyyMMddHHmmssffff");
//文件存放的文件路径
string folder = HttpContext.Server.MapPath("/Content/images/companies/");
// 保存文件
string filePath = Path.Combine(folder, now + fileType);
file.SaveAs(filePath);
//切出相对路径
string subFilePath = filePath.Substring(filePath.LastIndexOf("\\Content"));
JsonResult json = new JsonResult();
json.ContentType = "text/html";
json.Data = new { imagePath = subFilePath, success = true };
return json;
//return Content(filePath);
}
注意: UploadImage(HttpPostedFileBase file){} 里面的file 一定要是前台 name="file"
返回的json不可以直接回传,需要新建一个JsonResult , 备注json.ContentType = "text/html"; 否则默认是application/json,前台html无法识别