iframe非同步上傳文件
1. 非同步上傳圖片，怎麼實現表單提交，不刷新頁面，並且回顯圖片
你這是要用AJAX啊。
用JQUERY會方便一點。如果要用原生的js.
var xmlHttp=new XMLHttpRequest();
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
然後你的xmlHttp.open("POST",url);這里必須用POST。
接下來，就是xmlHttp.send(你的數據文件)
我這里是簡寫了。xmlHttp的生成在IE和其實瀏覽器下實例化是不一樣的。你可以找一下資料。
接下來，就是提交到伺服器上去了，你的程序處理保存圖片後，生成一個地址後回傳給請求的頁面。
你再xmlHttp.responseText獲取這個地址，就可以回顯了。
2. 實現Iframe內文件的上傳
我知道你的意思，你是想實現那種所謂的「無刷新上傳文件」吧
呵呵。。。
給你個思路，在頁面內部上傳文件你應該是會的，這個就不用說了，就是加了iframe之後需要在外部得到上傳文件的路徑，然後保存到伺服器，這個可能是你不知道怎麼弄的問題吧，（我是猜的，因為既然你能提出這樣的問題，應該說明不加iframe的本頁上傳你是會的）
你應該這樣做，這個按鈕寫在iframe內部，就用它實現上傳，直接上傳，然後需要在iframe的外部調用它的頁面得到路徑
類似a.html中有個<iframe src="b.aspx"></iframe>
1、把按鈕寫在b.aspx，並且定義一個隱藏域，暫定為<input type="hidden" id="filePath_hidden" runat="server" />
這個隱藏域可以由後台賦值
2、點擊按鈕，用你的C#代碼上傳文件，並且將路徑保存到filePath_hidden裡面，filePath_hidden.value=路徑;
剩下的，我寫起來比較費時間，而且代碼比較多，但是不復雜，相信你一看就知道了，得到b.aspx內部filePath_hidden的值就好辦了
具體看到http://58.51.84.58:81裡面去，注冊一個會員，然後進入會員中心，修改資料那裡，我就是這么實現的，內部有個iframe，指向上傳文件的文件，在外部如何保存數據的，在會員中心那個頁面你可以查看源代碼，看看，如果將iframe內部的數據返回給外部。得到iframe內部的數據，在外部就可以像平時那樣保存數據了，
聲明，這個網站只是我給別的公司做的一個企業網站，因為我在這里寫的比較多，你可以直接去參考，不是做廣告，那個公司跟我們公司沒有任何關系
既然你說用asp.net回答，那麼我就告訴你，那隻有一種辦法，就是在內部上傳之後用session保存(Cookie也可以)
session["路徑"]=路徑;
之後在外部頁面調用這個session值就可以了，
3. java非同步上傳文件怎麼做
採用ajax上傳(struts或jspsmart),下面提供一個思路
1\在jsp頁面上嵌入一個隱藏的IFrame;
2\把相應上傳文件路徑傳到iframe裡面的src的jsp頁面進行提交;
3\提交執行相應的.do或jsp就OK;
試一下,這個問題也困擾我很久了,最近才想出來的一個解決方案,由於工作忙沒有去實現.
4. php提交表單問題，現在表單裡面引入了iframe，可裡面的input裡面的值不能提交過去
用iframe 裡面載入的圖片？？？
post不出去的 不用想了。
提示 不要用iframe容器，因為父級框架中 無法 提交子框架的 表單。 僅僅用原生的提交表單按鈕 是絕對不可能的操作。
如果可以 改用div容器。顯示預覽，然後 提交原父級表單中的<input type="file"> 可以post傳遞文件。 iframe下的表單 僅僅用原生的 提交表單按鈕 你post不出去
如果又能力自己重寫提交動作，重組post數據（jq很簡單實現這個）。也可以提交iframe下的子表單的input數據。
以下是我用的 簡單的帶圖片預覽上傳的 部分代碼
引用以下庫
ajaxfileupload.js
jquery-migrate-1.2.1.min.js
jquery-1.11.0.min.js
$('input#but_upload').click(function(){
//picdata=$('input#picfile').val;
tc=$('div#tags').children('span.selecttag').eq(0).attr('mete_id');
tout=$('div#infos').children('div#sel_mod').find('li.selected').last().attr('mete_hash_name');
if(typeof(tc)=='undefined'){
$('p#outerdebug').text('請選擇一個標簽');
returnfalse;
}
if(typeof(tout)=='undefined'){
$('p#outerdebug').text('請選擇上傳圖片所在的模板框架');
returnfalse;
}
if($("#picfile").val().length<=0){
$('p#outerdebug').text('請選擇一個要上傳的本地文件');
returnfalse;
}
$.ajaxFileUpload({
url:"postpic.php?token="+token+"&tags="+tc+"&hash_name="+tout,
secureuri:false,
type:'post',
fileElementId:'picfile',
dataType:'json',
success:function(data,status){
if(data.success==true){
tempstr="<divclass="pics"mete_hash=""+data.hash_name+""><divclass="prepic"><imgsrc=""+data.url+""></div><divclass="act"><divclass="removethis"onclick="removethis(this)"></div><divclass="reflink"onclick="reflink(this)"></div></div></div>";
$("div#previews").prepend(tempstr);
}else{
$('p#outerdebug').text(data.error);
}
},
error:function(data,status,e)//伺服器響應失敗處理函數
{
$('p#outerdebug').text('BR_0'+e);
}
});
})HTML
<form><inputid="picfile"name="picfile"type="file"size="2000000"/><br/><inputid="but_upload"type="button"value="上傳"/><hr/></form><pid="outerdebug"></p><divid="previews"><hrstyle="clear:both;visibility:hidden;"/>
順帶一提的是，這個實現非同步提交上傳文件的js庫，實際上就是利用了iframe，在iframe子框架內提前實現了一次post。
另外，從用戶端執行效果出發。不建議用iframe。 iframe載入是使用的主線程句柄。如果iframe頁面響應時間過長。會導致全部頁面，包括父級頁面鎖死。用戶體驗較差。 能用ajax非同步，盡量用。 我還沒遇到過ajax載入 輸入到div容器，用戶體驗感反而比iframe差的情況。
5. php 非同步上傳圖片幾種方法總結
代碼如下
form action="upload.php" id="form1" name="form1" enctype="multipart/form-data" method="post" target="uploadIframe"> <!--上傳圖片頁面 --> </form> <iframe name="uploadIframe" id="uploadIframe" style="display:none"></iframe>
然後後台處理完上傳圖片邏輯後返回給前台，利用ajax修改當前頁面DOM對象實現無刷新上傳圖片的友好功能。
實例
代碼如下
a.html <form enctype="multipart/form-data" action="a.php" target="ifram_sign" method="POST"> <input name="submit" id="submit" value="" type="hidden"> <label>上傳文件: <input name="test_file" type="file" id="test_file" size="48"></label> <input type="image" value="立即上傳" id="submit_btn"> </form><iframe name="ifram_sign" src="" frameborder="0" height="0" width="0" marginheight="0" marginwidth="0"></iframe>
php代碼：
代碼如下
<?php
if ($_files["test_file"]["error"] > 0)
{
echo "Error: " . $_files["test_file"]["error"] . "<br />";
}
else
{
//這里的判斷圖片屬性的方法就不寫了。自己擴展一下。
$filetype=strrchr($_files["test_file"]["name"],".");
$filetype=substr($filetype,1,strlen($filetype));
$filename="img/".time("YmdHis").".".$filetype;
move_uploaded_file($_files["test_file"]["tmp_name"],$filename);
echo '<script >alert(1)</script>';
$return="parent.document.getElementByIdx_x('mpic".$pageset_id."').innerhtml='".$dataimgpath."'";
echo "<script >alert('上傳成功')</script>";
echo "<script>{$return}</script>";
}
?>
其實jquery ajax圖片非同步上傳
html:
<!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" lang="en_US" xml:lang="en_US">
<head>
<title>圖片非同步上傳</title>
</head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link type="text/css" rel="stylesheet" href="css/index.css">
<body>
<div class="frm">
<form name="uploadFrom" id="uploadFrom" action="upload.php" method="post" target="tarframe" enctype="multipart/form-data">
<input type="file" id="upload_file" name="upfile">
</form>
<iframe src="" width="0" height="0" style="display:none;" name="tarframe"></iframe>
</div>
<div id="msg">
</div>
</body>
</html>
index.js
$(function(){
$("#upload_file").change(function(){
$("#uploadFrom").submit();
});
});
function stopSend(str){
var im="<img src='upload/images/"+str+"'>";
$("#msg").append(im);
}
upload.php
<?php
$file=$_files['upfile'];
$name=rand(0,500000).dechex(rand(0,10000)).".jpg";
move_uploaded_file($file['tmp_name'],"upload/images/".$name);
//調用iframe父窗口的js 函數
echo "<script>parent.stopSend('$name')</script>";
?>
非同步上傳圖片幾種方法
6. 在一個父頁面中嵌入了一個iframe窗口來上傳文件，怎麼在文件上傳後將文件路徑顯示到父頁面的表單中
a.html
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body>
<iframesrc="b.html"frameborder="0"width="300px"height="100px">
</iframe>
<inputtype="text"id='show'>
</body>
</html>
b.html
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body>
<inputtype="file"id='f'>
<inputtype="submit"onclick="showdir()">
</body>
<script>
functionshowdir(){
f=document.getElementById('f');
self.parent.document.getElementById("show").value=f.value;
}
</script>
</html>
7. iframe可以做到非同步載入么
iframe默認是非同步的。 iframe一般用來包含別的頁面，例如可以在自己的網站頁面載入別人網站的內，為了更好的效果，可能需要使iframe透明效果，那麼就需要了解更多的iframe屬性。
8. 怎麼用ajax上傳文件，通俗的講 怎麼在得到input file 的文件 不是路徑，，而且這個文件。流
ajax.post是不能上傳文件的。非同步上傳文件比較流行的是一般是兩種思路。
一、利用flash，很多jquery插件都是利用flash
二、利用iframe。
9. iframe成功非同步上傳後，怎麼調用前端的回調函數
Form:
<form action="#" method="post" enctype="multipart/form-data" onsubmit="return chekcForm(this)">
Struts :
response.setContentType("text/html;charset=utf-8");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
out.print("JSON字串"); // {"statusCode":200; "message":"成功"; "loadUrl":"http://"}
out.flush();
out.close();
JQ:
var frame = {
ajaxDone:function(json){
if (json.statusCode == 200){
$('#messageDiv').html(json.message).show();
$.jquery.load(json.loadUrl);
} else {
}
},
frameDone:function(config){
var ifr = null,
fm = null,
defConfig = {
formObj: $('#form'),
complete: function(response) {},
};
config = $.extend(defConfig, config);
var $form = config.formObj;
var frameName = 'callbackframe';
ifr = $('<iframe name="'+ frameName +'" id="'+ frameName +'" style="display:none;"></iframe>');
ifr.appendTo($('body'));
$form.attr("target",frameName);
ifr.load(function(){
var response = this.contentWindow.document.body.innerHTML;
config.complete.call(this, response);
ifr.remove();
ifr = null;
});
return false;
}
}
function checkForm(form){
frame.frameDone({
formObj: $form,
complete: function(response){
var j = $.parseJSON(response);
frame.ajaxDone(j);
}
});
return true;
}
10. jqueryajax不能上傳圖片
不能上傳的原因可能是jquery插件使用不正確。
解決方法：
1、在head之間加入jquery引用
<scripttype="text/javascript" src="jquery.js"></script>
<scriptsrc="project/js/jquery.form.js" type="text/javascript"></script>
<scriptsrc="project/js/fileload.js" type="text/javascript"></script>
2、定義fileload.js，代碼如下：
function createHtml(obj) {
var htmstr = [];
htmstr.push( "<form id='_fileForm' enctype='multipart/form-data'>");
htmstr.push( "<table cellspacing="0" cellpadding="3" style="margin:0 auto; margin-top:20px;">");
htmstr.push( "<tr>");
htmstr.push( "<td class="tdt tdl">請選擇文件：</td>");
htmstr.push( "<td class="tdt tdl"><input id="loadcontrol" type="file" name="filepath" id="filepath" /></td>");
htmstr.push( "<td class="tdt tdl tdr"><input type="button" onclick="fileloadon()" value="上傳"/></td>");
htmstr.push( "</tr>");
htmstr.push( "<tr> <td class="tdt tdl tdr" colspan='3'style='text-align:center;'><div id="msg"> </div></td> </tr>");
htmstr.push( "<tr> <td class="tdt tdl tdr" style=" vertical-align:middle;">圖片預覽：</td> <td class="tdt tdl tdr" colspan="2"><div style="text-align:center;"><img src="project/Images/NoPhoto.jpg"/></div></td> </tr>");
htmstr.push( "</table>")
htmstr.push( "</form>");
obj.html(htmstr.join(""));
}
function fileloadon() {
$("#msg").html("");
$("img").attr({ "src": "project/Images/processing.gif" });
$("#_fileForm").submit(function () {
$("#_fileForm").ajaxSubmit({
type: "post",
url: "project/help.aspx",
success: function (data1) {
var remsg = data1.split("|");
var name = remsg[1].split("/");
if (remsg[0] == "1") {
var type = name[4].substring(name[4].indexOf("."), name[4].length);
$("#msg").html("文件名：" + name[name.length - 1] + " --- " + remsg[2]);
switch (type) {
case ".jpg":
case ".jpeg":
case ".gif":
case ".bmp":
case ".png":
$("img").attr({ "src": remsg[1] });
break;
default:
$("img").attr({ "src": "project/Images/msg_ok.png" });
break;
}
} else {
$("#msg").html("文件上傳失敗：" + remsg[2]);
$("img").attr({ "src": "project/Images/msg_error.png" });
}
},
error: function (msg) {
alert("文件上傳失敗");
}
});
return false;
});
$("#_fileForm").submit();
}
3、服務端處理上傳。
protected void Page_Load(object sender, EventArgs e)
{
try
{
HttpPostedFile postFile = Request.Files[0];
//開始上傳
string _savedFileResult = UpLoadFile(postFile);
Response.Write(_savedFileResult);
}
catch(Exception ex)
{
Response.Write("0|error|上傳提交出錯");
}
}
public string UpLoadFile(HttpPostedFile str)
{
return UpLoadFile(str, "/UpLoadFile/");
}
public string UpLoadFile(HttpPostedFile httpFile, string toFilePath)
{
try
{
//獲取要保存的文件信息
string filerealname = httpFile.FileName;
//獲得文件擴展名
string fileNameExt = System.IO.Path.GetExtension(filerealname);
if (CheckFileExt(fileNameExt))
{
//檢查保存的路徑 是否有/結尾
if (toFilePath.EndsWith("/") == false) toFilePath = toFilePath + "/";
//按日期歸類保存
string datePath = DateTime.Now.ToString("yyyyMM") + "/" + DateTime.Now.ToString("dd") + "/";
if (true)
{
toFilePath += datePath;
}
//物理完整路徑
string toFileFullPath = System.Web.HttpContext.Current.Request.PhysicalApplicationPath + toFilePath;
//檢查是否有該路徑 沒有就創建
if (!System.IO.Directory.Exists(toFileFullPath))
{
Directory.CreateDirectory(toFileFullPath);
}
//得到伺服器文件保存路徑
string toFile = Server.MapPath("~" + toFilePath);
string f_file = getName(filerealname);
//將文件保存至伺服器
httpFile.SaveAs(toFile + f_file);
return "1|" + toFilePath + f_file + "|" + "文件上傳成功";
}
else
{
return "0|errorfile|" + "文件不合法";
}
}
catch (Exception e)
{
return "0|errorfile|" + "文件上傳失敗,錯誤原因：" + e.Message;
}
}
/// <summary>
/// 獲取文件名
/// </summary>
/// <param name="fileNamePath"></param>
/// <returns></returns>
private string getName(string fileNamePath)
{
string[] name = fileNamePath.Split('\');
return name[name.Length - 1];
}
/// <summary>
/// 檢查是否為合法的上傳文件
/// </summary>
/// <param name="_fileExt"></param>
/// <returns></returns>
private bool CheckFileExt(string _fileExt)
{
string[] allowExt = new string[] { ".gif", ".jpg", ".jpeg", ".rar",".png" };
for (int i = 0; i < allowExt.Length; i++)
{
if (allowExt[i] == _fileExt) { return true; }
}
return false;
}
public static string GetFileName()
{
Random rd = new Random();
StringBuilder serial = new StringBuilder();
serial.Append(DateTime.Now.ToString("HHmmss"));
serial.Append(rd.Next(100, 999).ToString());
return serial.ToString();
}
4、運行defualt.aspx頁面以後顯示的效果是：
