iframe 无刷新上传图片以及返回值

后台php代码返回获取内容的值

$imginfo = $upload->getUploadFileInfo ();
			$wall_img = $imginfo [0] [‘savepath‘] . $imginfo [0] [‘savename‘];
			$array=array(
				‘wall_img‘=>$wall_img,
			);
			echo ‘<script type="text/javascript">  
					window.parent.setVal("‘.$wall_img.‘");
					</script> ‘;

在前端

 <iframe name="ajaxUpload" style="display:none" id="pic_url"></iframe>

                            
                            <form name="from1" id="from1" method="post" action="index.php?g=Wap&m=Store&a=put_wall_img"  enctype="multipart/form-data" target="ajaxUpload"> 
                            <input type="button" data-inline="true" value="&nbsp;&nbsp;上传图片&nbsp;&nbsp;"  onclick=‘file_upload.click();‘>
                            <input type="file"  value="&nbsp;&nbsp;上传图片&nbsp;&nbsp;"  name="file_upload" id="file_upload" style="display:none" data-role="none">
                            </form>

JS代码处理

$("#file_upload").change(function(){
		$("#from1").submit();
		setTimeout(‘goto_bottom()‘, 500) ;
	});
	function setVal(val){
		 var $li = $(
		    		‘<div class="content_one"><img src="‘+$(‘#img1‘).val()+‘" class="content_one1"><div style="position:relative; overflow:hidden;"><img src="" id="pic_wall_list" style="max-width:50%; border:#CCC 1px solid; margin-left:3%"><input data-role="none" type="button" value="点击发送图片" class="content_send"></div> </div>‘
		            ),
		     $img = $li.find(‘#pic_wall_list‘);
		    // $list为容器jQuery实例
		    $(‘.msg‘).append($li);
		    $img.attr( ‘src‘, val );
		    $li.find(".content_send").click(function(){
				var _this=this;
				$.ajax({
					url:"index.php?g=Wap&m=Store&a=do_put_wall_img",
					type:"post",
					dataType:"json",
					data:"pic_url="+val,
					success:function(data){
						if(data=="success"){
							$(_this).val("发送成功");
							$(_this).css(‘color‘,‘green‘);
							$(_this).unbind("click"); 
						}
					}
				});
		});
	}
时间: 2024-10-28 18:49:55

iframe 无刷新上传图片以及返回值的相关文章

(iframe实现)无刷新上传图片

Index.aspx 页面 <html> <head> <title>iframe实现无刷新上传图片</title> </head> <body> <input id="photo" name="photo" type="text" style="display: none" /> <iframe id="upfile1&quo

无刷新上传图片,ajax 和 iframe

iframe 上传 upload.html <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js">

利用iframe无刷新上传文件的坑

原文:利用iframe无刷新上传文件的坑 页面里经常要用到文件上传的功能,而且要求页面不刷新,先说一下原理:页面里放一个file控件和submit按钮,外面用form表单包住,给form表单加上对应的属性值,action.method.entype.name,到这一步,能上传文件了,但是这样上传文件会刷新页面,这不是我们想要的.我们要的是文件上传时不刷新页面,那么也简单,在页面里放一个iframe,设置它的宽高为0,这里有两个坑: 1.需要设置iframe的name值与form的target属性

javascript 无刷新上传图片之原理

刚开始我认为可以像ajax 那样获取到数据然后通过ajax 发送请求,后来发现浏览器为了客户端的安全默认并没有给javascript 这个权限.这个方法当然是行不同了.我看了好像开源的上传图片原理,当然大部分是flash.但是为了方便使用js的也不少. 原理都是使用iframe 上传,在from标签里面有个属性 和a 标签一样 target,target标示这个表单的数据提交的目的地.网页特效代码target里面写iframe的name ,这样表单的数据就提交到了这个 iframe里面.根据这个

MVC无刷新上传图片并显示

@{ ViewBag.Title = "Home Page"; } <script src="../../Scripts/swfobject.js" type="text/javascript"></script> <script src="../../Scripts/jquery.uploadify.v2.1.4.js" type="text/javascript">&

使用SWFUpload组件无刷新上传图片

使用SWFUpload组件无刷新上传图片 在做项目时,需要用到一个图片的无刷新上传,之前听说过SWFUpload,于是想要通过SWFUpload来进行图片的无刷新上传,由于我的项目属于是ASP.NET项目,所以本文着重讲解ASP.NET 的使用,个人感觉示例基本给的很清晰,参考文档进行开发,并非难事 0.     首先下载swfUpload 包,在下载的包中有samples文件夹,samples下有demos文件夹,打开demos文件夹可看到如下图所示结构 我们待会会用到的包括,swfuploa

JAVA servlet无刷新上传图片文件并裁剪demo代码(Jcrop)

原文:JAVA servlet无刷新上传图片文件并裁剪demo代码(Jcrop) 源代码下载地址:http://www.zuidaima.com/share/1550463770102784.htm sevlet写的demo,可直接运行.   

表单无刷新上传图片

近期做有关上传图片的项目,发现都没有使用无刷新页面上传方式,都是通过传统的上传图片跳转然后显示图片,这对于上传多张图片就太不适用! 网上也有各种异步上传的插件 如 swfupload等比较庞大的插件,利用flash上传,顺带介绍一个比较简洁的ajax上传图片的插件ajaxFileUpload: 直接上地址:http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 现在普通上传方式上改造一下,实现无刷新上传 通过隐藏ifram

隐藏iframe无刷新上传文件

首先ajax不能上传文件,这误导了我有段时间,今晚睡不着就照着说明做了个无刷新上传文件 其实原理很简单 <form enctype="multipart/form-data" method="POST" target="upload" action="http://localhost/class.upload.php" > <input type="file" name="upl