无刷新上传文件

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="'+this.result+'" alt=""/>'
                }
            }
        </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="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);
        }
    }
}

无刷新上传文件

推荐阅读