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页面以后显示的效果是：
