问题性博客,就直接入主题
- View中:
<form method="post"> <div id="fileError"></div> <div id="fileName"></div> <input type="file" class="easyui-linkbutton" id="fileToUpload" οnchange="fileSelected();" /> <img id="personimg" src="" style=" width:100px;" /> <input type="button" id="btnupload" οnclick="uploadFile()" value="上传"> </form>
- js代码:
$(document).ready(function () { $("#btnupload").hide(); var fileName = null; }) //选择上传文件---图片的上传预览只限单张。 function fileSelected() { //无论选取了多少张相片,只选取第一张 var file = document.getElementById('fileToUpload').files[0]; fileName = file.name; var file_typename = fileName.substring(fileName.lastIndexOf('.'), fileName.length); if (file_typename == '.jpg' || file_typename == '.gif' || file_typename == '.png' || file_typename == '.bmp') {//这里限定上传文件文件类型 if (file) { var fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB'; if (fileSize > 2) { document.getElementById('fileError').innerHTML = "上传图片大小不应超过2M"; } else { //图片满足条件 document.getElementById('fileError').innerHTML = ""; //可上传图片 $("#btnupload").show(); } } } else {//图片格式不符合规则 $("#btnupload").hide(); document.getElementById('fileError').innerHTML = "<span style='color:Red'>图片格式应为jpg,gif,png,bmp" + ",请重新选择图片</span>" } } function uploadFile() { //隐藏上传按钮 $("#btnupload").hide(); var fd = new FormData(); fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]); //声明AJAX局部更新对象 var xhr = null if (window.XMLHttpRequest) { xhr = new XMLHttpRequest() } else if (window.ActiveXObject) { xhr = new ActiveXObject("Microsoft.XMLHTTP") } xhr.open("POST", "/UpDownload/Upload", false); //服务已经相应完成 xhr.send(fd); if (xhr.readyState == 4 && xhr.status == 200) { alert(); $('#personimg').attr("src", "../../../" + fileName); } }
- controller代码:
public ActionResult Index() { return View(); } [HttpPost] [ValidateInput(false)] public bool Upload(HttpPostedFileBase[] fileToUpload) { string path = ""; try { //TODDO:读取任何地方的路径 foreach (HttpPostedFileBase file in fileToUpload) { path = System.IO.Path.Combine(Server.MapPath("~/"), System.IO.Path.GetFileName(file.FileName)); //写入数据库 // UpLoadDB(path, file.FileName, id); file.SaveAs(path); } return true; } catch { return false; } }