首页 > 代码库 > 无刷新上传文件

无刷新上传文件

2024-08-11 06:08:41   218人阅读

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>
View Code

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="http://www.mamicode.com/‘+this.result+‘" />‘                }            }        </script></body></html>
View Code

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=http://www.mamicode.com/"PicUpload.aspx" id="uploadframe" style="display: none;"></iframe>          <p>              <input type="button" id="btnBrowser" value=http://www.mamicode.com/"选择文件" 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);        }    }}

无刷新上传文件


联系
我们