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-12-16 23:46:16