HTML 代码：
<input type="file" id="fileid" οnchange="filesize(this)" runat="server" size="80" Width="200px" Height="25px"/> <input type="hidden" id="hidden_s" runat="server"/>
<input id="btnUpLoad" type="button" class="btn btn-ltgreen" style="width: auto;" value="上 传" οnclick="UpLoad()" runat="server" /> <!--"--> <input type="button" id="clickupload" onserverclick="UploadClient" style=" display:none" runat="server"/>
<span id="spanText" runat="server" style="color: Red"></span>
点击上传时候判断：
<script type="text/javascript"> function UpLoad() { if (path == "") { //未选中图片 不允许上传，提示用户 document.getElementById("spanText").innerHTML="请选择要上传的图片！"; return false; } else { document.getElementById("clickupload").click(); //符合上传条件 执行后台上传 return true; } }</script>
当file控件选中文件时候 显示文件大小，以便确定是否上传
<script type="text/javascript"> function filesize(ele) { // 返回 KB，保留小数点后两位 document.getElementById("spanText").innerHTML=""; var size = (ele.files[0].size / 1024).toFixed(2); document.getElementById("hidden_s").value = size; var show = ""; if (size < 1024) { show = size + "KB"; } else if (size >= 1024 && size < 1024 * 1024) { show = parseFloat(size / 1024).toFixed(2)+"M"; } document.getElementById("picsize").innerHTML = "文件大小：" +show; var filepath = $("#fileid").val(); var extStart=filepath.lastIndexOf("."); var ext=filepath.substring(extStart,filepath.length).toUpperCase(); if(ext!=".GIF"&&ext!=".JPEG"&&ext!=".JPG"){ document.getElementById("spanText").innerHTML="上传文件格式不正确,请确认！"; return false; } } </script>
给图片标签添加预览图片
<script> $("#fileid").change(function() { var objUrl = getObjectURL(this.files[0]); console.log("objUrl = " + objUrl); if (objUrl) { $("#Image1").attr("src", objUrl); } }); //建立一個可存取到该file的url function getObjectURL(file) { var url = null; if (window.createObjectURL != undefined) { // basic url = window.createObjectURL(file); } else if (window.URL != undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file); } else if (window.webkitURL != undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file); } return url; }</script>
后台实现客户端上传功能（可能有重复判断）
public void UploadClient(object sender, EventArgs e) { if (Request.Files.Count > 0) //使用客户端实现上传功能 { HttpPostedFile httppostfile = this.Request.Files[0]; string fname = httppostfile.FileName; //获取上传文件名称 string exten = Path.GetExtension(fname); //上传文件的后缀名 string extension = exten.ToLower(); //或许文件后缀名 string fileName = DateTime.Now.ToString("yyyyMMddhhmmss") + loginUserName; //图片重命名 bool bl = false; string[] strArr = new string[] { ".gif", ".jpeg", ".jpg" };//允许上传图片格式 if (Convert.ToDouble(this.hidden_s.Value) <= 1024) { for (int i = 0; i < strArr.Length; i++) { if (extension.ToLower() == strArr[i]) { bl = true; break; } } if (!bl) { this.spanText.InnerHtml = "图片格式不对！"; return; } } else { this.spanText.InnerHtml = "图片大小超过2M！"; return; } int index = fname.LastIndexOf("\\") + 1; int len = fname.Length - index; fname = fname.Substring(index, len); httppostfile.SaveAs(Server.MapPath(".") + "/upload/" + fileName + extension);//保存图片 picurl = "~/user/upload/" + fileName + extension; //得到文件保存在服务器上的路径 记录下来以便保存到服务器 Image1.Src = "~/user/upload/" + fileName; //上传完图片后，把上传后的图片显示在页面的图片框内 Add(); //吧图片保存到数据库 getUserM(); //刷新页面显示图片 } }
转载于:https://www.cnblogs.com/fengmingming/p/4151419.html
相关资源：js实现上传图片预览_缩放_剪裁