1.FormData
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> </head> <body> <form id= "uploadForm"> <p >指定文件名: <input type="text" name="filename" value= ""/></p > <p >上传文件: <input type="file" name="file"/></ p> <input type="button" value="上传" onclick="doUpload()" /> </form> <script type="text/javascript"> function doUpload() { var formData = new FormData($("#uploadForm")[0]); alert(JSON.stringify(formData)); $.ajax({ url: ‘upload.aspx‘, type: ‘POST‘, data: formData, async: false, cache: false, contentType: false, processData: false, success: function (returndata) { alert(returndata); }, error: function (returndata) { alert(returndata); } }); } $(function () { }) </script> </body> </html>
2.filereader
<html> <head> <title>File Reader</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> body { text-align: center; } #demo_result img { border: 2px solid #369; padding: 3px; } p { padding: 20px 0; } .warn { font-weight: bold; color: red; } </style> </head> <body> <p> <label>请选择一个图像文件:</label> <input type="file" id="demo_input"> </p> <div id="demo_result"></div> <script type="text/javascript"> var result = document.getElementById("demo_result"); var input = document.getElementById("demo_input"); if(typeof FileReader === ‘undefined‘){ result.innerHTML = "<p class=‘warn‘>抱歉,你的浏览器不支持 FileReader<\/p>"; input.setAttribute(‘disabled‘,‘disabled‘); }else{ input.addEventListener(‘change‘,readFile,false); } function readFile(){ var file = this.files[0]; if(!/image\/\w+/.test(file.type)){ alert("请确保文件为图像类型"); return false; } var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e){ result.innerHTML = ‘<img src="‘+this.result+‘" />‘ } } </script> </body> </html>
3. Iframe
原理:将图片上传的页面放在iframe中,这样就可以在iframe中将图片提交到服务器而不需要页面刷新,提交成功后用脚本实现主页面显示上传的图片。
Default.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript"> function doUpload() { var theFrame = document.getElementById("uploadframe"); if (theFrame) { theFrame = theFrame.contentWindow; theFrame.selectAndUpload(); } } function callback(str) { var theImg = document.getElementById("imgResult"); theImg.setAttribute("src", str); } </script> </head> <body> <form id="form1" runat="server"> <div> <h1> Asp.net 异步上传示例</h1> <iframe src="PicUpload.aspx" id="uploadframe" style="display: none;"></iframe> <p> <input type="button" id="btnBrowser" value="选择文件" onclick="doUpload()" /> </p> <h2> 上传结果</h2> <p> <img alt="上传后的图片" id="imgResult" style="width: 400px" /> </p> </div> </form> </body> </html>
PicUpload.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PicUpload.aspx.cs" Inherits="PicUpload" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript"> function selectAndUpload() { var theFileUpload = document.getElementById("<%=fileUpload1.ClientID%>"); theFileUpload.onchange = function () { var fileExt = theFileUpload.value.substr(theFileUpload.value.lastIndexOf(".")); if (!fileExt.match(/\.jpg|\.png|\.gif/i))//验证一下是不是图片 { top.alert("只能上传jpg,png,gif图片。"); } else { var myForm = document.getElementById("<%=form1.ClientID%>"); myForm.submit(); } } theFileUpload.click(); } function callback(filePath) { top.callback(filePath); } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:FileUpload runat="server" ID="fileUpload1"></asp:FileUpload> </div> </form> </body> </html>
PicUpload.aspx.cs:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class PicUpload : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (IsPostBack && fileUpload1.HasFile) { string path = Server.MapPath("~/upload/" + fileUpload1.FileName); fileUpload1.SaveAs(path); ClientScript.RegisterClientScriptBlock(this.GetType(), "callback", "callback(‘upload/" + fileUpload1.FileName + "‘)", true); } } }
时间: 2024-10-12 19:47:47