异步上传文件iframe
⑴ 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差的情况。
⑵ 怎么用ajax上传文件,通俗的讲 怎么在得到input file 的文件 不是路径,,而且这个文件。流
ajax.post是不能上传文件的。异步上传文件比较流行的是一般是两种思路。
一、利用flash,很多jquery插件都是利用flash
二、利用iframe。
⑶ ajax怎么提交带文件上传表单
上传的文件是没有办法和表单内容一起异步的,可考虑使用jquery的ajaxfileupload,或是其他的插件,异步上传文件后,然后再对表单进行操作。
⑷ 异步上传图片,怎么实现表单提交,不刷新页面,并且回显图片
你这是要用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获取这个地址,就可以回显了。
⑸ 实现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值就可以了,
⑹ 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页面以后显示的效果是:
⑺ img如何接收jquery ajax异步上传的动态图片
你的表述没看懂,jquery 异步上传过后获取路径 直接给img 的src赋值不就完了?