`
lg_asus
  • 浏览: 191919 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

iframe上传图片

阅读更多
$.fn.extend({
	upload:function(){
		var hidden = $(this);
		var id=hidden.prop("id");
		var form=$("<form>").prop("id",id).prop("target", "uploadIframe").prop("action","/upload").prop("method","post").prop("enctype","multipart/form-data").css({"position":"absolute","top":hidden.parent().offset().top,"left":hidden.prev().length==0?hidden.parent().offset().left:(hidden.parent().offset().left+hidden.prev().width()+15),"width":"500px","height":"25px"}).appendTo($("body"));
		var file=$("<input>").prop("type","file").prop("name","file").addClass("col-sm-6").appendTo(form);
		var submit = $("<button>").prop("type","button").addClass("btn btn-default btn-sm").text("上传");
		var preview = $("<a>").prop("target","blank").attr("preview","").css({"visibility":"hidden"}).append($("<button>").prop("type","button").addClass("btn btn-default btn-sm").text("预览"));
		$("<label>").addClass("col-sm-4").append(submit).append($("<label>").text(" ").css({"width":"20px"})).append(preview).appendTo(form);
		submit.on("click", function(){
			if(!file.val()){
				alert("请选择文件");return;
			}
			$("#callbackFunction").remove();
			$("<script>").prop("id","callbackFunction").prop("type","text/javascript").text("function callback(imagename){$(\"input[id='"+id+"']\").val(imagename);alert('上传成功');$(\"form[id='"+id+"'] a[preview]\").css('visibility','visible').prop('href','/feidanstaff/visit/image/'+imagename+'.do');}").appendTo($("body"))
			form.submit()}
		);
		if(!$("iframe#uploadIframe") || $("iframe#uploadIframe").length==0){$("<iframe>").css({"visibility":"hidden"}).prop("id","uploadIframe").prop("name","uploadIframe").appendTo($("body"))};
	}
});

用法:
2:<input type="hidden" name="xxxx" id="upload"/>, 每个input必须要有id。
3:$("#upload").upload()即可,会自动生成<input type="file"/>和"上传"按钮。当上传后,图片路径就会回写到上面的hidden <input>中。
4:注意,会自动生成callback()函数,因此用户在这个页面一定不要有同名的callback()函数。 
4:upload controller返回: 
return "<script type=\"text/javascript\">parent.callback('"+imagename+"')</script>";
分享到:
评论

相关推荐

    asp上传大全之四iframe上传组件

    在ASP上传大全中,"iframe上传组件"是解决文件上传问题的一种常见方法。iframe,全称Inline Frame,是一种HTML标签,允许在一个HTML文档中嵌入另一个HTML文档。在文件上传场景中,iframe常被用来异步处理文件上传,...

    iframe实现图片异步上传.doc

    为了安全起见,需要注意防止跨站脚本攻击(XSS)、文件类型限制(确保只能上传图片)、大小限制(防止过大文件导致服务端崩溃)等。同时,应当处理异常情况,如上传失败或服务器响应错误。 综上所述,通过`iframe`...

    js加iframe轻松实现异步图片上传 可以预览 兼容FF,chrome,ie9

    这个"异步上传图片Demo"压缩包中应该包含了实现以上步骤的HTML、CSS和JavaScript代码,通过查看和学习这些代码,你可以更深入地理解异步图片上传与预览的实现细节。实际开发时,还需要考虑错误处理、进度显示、多...

    vue-quill-editor视频上传,图片上传到服务器模块,用video标签替换iframe

    quill视频上传,图片上传到服务器模块,用video标签替换iframe 安装教程 cnpm i vue-quill-editor cnpm i quill cnpm i quill-video-image-module 使用说明 import 'quill/dist/quill.core.css' // import styles...

    iframe图片上传+用户本地加载图片+jquery表达验证+视频解析demo

    标题中的“iframe图片上传+用户本地加载图片+jquery表达验证+视频解析demo”涉及了四个主要的Web开发技术点,接下来我们将逐一详细讲解。 1. **Iframe图片上传**: 在Web应用中,iframe常用于创建一个独立的浏览...

    iframe图片上传接口(某项目中的图片接口,图片存成oracle中的Blob)

    这个项目中,开发者使用了`iframe`来实现图片的上传,同时将图片数据存储到Oracle数据库的Blob类型字段中。Blob(Binary Large Object)是数据库系统用来存储二进制大对象的数据类型,如图像、音频或视频文件。接...

    php之表单文件iframe异步上传

    "iframe异步上传"技术就是为了解决这个问题而出现的一种解决方案。这种技术结合了HTML的`&lt;iframe&gt;`元素和JavaScript,使得文件能够后台静默上传,不影响用户在页面上的其他操作。 首先,我们要理解什么是`&lt;iframe&gt;`...

    iframe框架上传.rar

    在ASP(Active Server Pages)开发中,文件上传是一项常见的功能,尤其在网页表单中用于让用户提交图片、文档等文件。然而,传统的ASP文件上传通常需要借助服务器端的组件,如"CGI"(Common Gateway Interface)或者...

    [php]ifame仿ajax图片上传预览,兼容IE\FF\Chrome

    总的来说,这个项目提供了一个基于iframe的跨浏览器图片上传预览解决方案,对于那些需要在老式浏览器上实现类似功能的开发者来说,是一个有价值的参考资料。通过深入研究和理解这个项目的源码,我们可以学习到如何在...

    ckeditor 自己写的一个简单的image上传js 运用iframe的ajax上传

    "ckeditor 自己写的一个简单的image上传js 运用iframe的ajax上传"是一个关于CKEditor自定义插件的实践案例,通过JavaScript实现了图片上传功能。下面将详细阐述这一知识点及其相关技术。 首先,CKEditor是一款开源...

    java上传图片后立即将图片显示出来

    综上所述,"java上传图片后立即将图片显示出来"这一功能的实现涉及到Java的文件上传处理、IFrame技术的运用、前端JavaScript的交互以及服务器端的文件管理和安全控制等多个方面。理解这些关键点对于开发高质量的Web...

    iframe实现页面局部刷新操作

    上传图片" /&gt; ``` 这里的`enctype`属性设为`multipart/form-data`,因为我们要上传文件。表单提交后,数据会发送到`upload.php`,而页面不会刷新。 在服务器端,PHP负责接收和处理上传的文件。`upload.php`需要...

    asp\php无组件批量上传 支持html5\form\swf\iframe等方式上传

    5. **IFrame上传**: IFrame常用于实现异步上传,因为它允许在后台加载页面而不会影响用户界面。通过在IFrame中提交表单,可以隐藏上传过程,同时避免页面刷新。`iframe`目录可能包含使用IFrame实现上传的示例代码...

    优化kindeditor,修改flash批量上传图片方式为H5上传

    首先,我们需要理解H5上传图片的核心技术是`File API`,它允许浏览器读取、写入和操作本地文件,而无需服务器的介入。在KindEditor中,我们可以通过监听`change`事件来获取用户选择的文件,然后利用`FileReader`对象...

    原生ajax和iframe框架实现图片文件上传的两种方式

    方法一:利用iframe框架上传图片 html代码如下: &lt;form name=uploadFrom id=uploadFrom action=upload.php method=post target=tarframe enctype=multipart/form-data&gt; &lt;input type=file i

    ajax无刷新上传图片

    总结,实现"ajax无刷新上传图片",关键在于利用Ajax的异步特性结合IFrame规避文件上传限制,通过JavaScript控制前端交互,服务器端处理文件存储,最后通过Ajax更新页面状态,提供流畅的用户体验。在开发过程中,需要...

    真正解决百度编辑器UEditor上传图片跨域问题.docx

    本文将详细探讨如何解决UEditor在前后端分离项目中上传图片的跨域问题。 首先,跨域是浏览器的一个安全机制,限制了JavaScript脚本只能访问同源(协议、域名、端口相同)的资源。然而,在前后端分离的项目中,编辑...

    百度富文本框(Ueditor)自定义上传接口,并解决单图片上传的跨域问题

    本文将详细介绍如何自定义Ueditor的图片上传接口以及解决单图片上传的跨域问题。 首先,理解什么是跨域。在浏览器的安全策略中,同一源策略规定,一个网页上的脚本只能访问与该网页同源(协议、域名、端口都相同)...

    用iframe实现不刷新整个页面上传图片的实例

    1. 页面上传图片的部分放到一个iframe中,iframe设置无边框无滚动条,和所嵌入的页面风格一致,根据需要设置固定大小 2. 在iframe中提交上传图片的表单,提交后再次返回原页面(iframe所指向的页面)并从服务器带回刚...

    LayEdit(layer 富文本编辑器使用,包含图片的上传)

    总的来说,LayEdit提供了便捷的富文本编辑体验,并且集成了图片上传功能,使得开发者能够快速构建具有富文本编辑和图片管理功能的网页。通过熟练掌握LayEdit的API和配置选项,我们可以轻松地在项目中集成这一强大...

Global site tag (gtag.js) - Google Analytics