$.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实现图片异步上传.dociframe实现图片异步上传.dociframe实现图片异步上传.dociframe实现图片异步上传.doc
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...
js加iframe轻松实现异步图片上传 可以预览 兼容FF,chrome,ie9
iframe图片上传,某项目中的图片接口,图片存成oracle中的Blob,ID生成策略调用存储过程,实现图片的新增,修改,删除,预览的功能。附全部代码,数据库,希望跟朋友们交流下。
php之表单文件iframe异步上传
那么怎么取出来,开始我把值直接输出到iframe中,但是我去取出路径的时候一直没反应,一直在网上查看资料,但是各种版本就是没有一个全面的讲解怎么使用iframe上传图片然后实现实时刷新的功能,只能自己研究了。...
使用iframe实现图片上传以及上传后的本页面无刷新展示。运行环境是php和jq
2、用iframe上传文件,提交表单,主要思路就是: a、js创建form表单,iframe,添加到body里,form的target要和iframe的name一致。 b、form表单里更新数据,submit提交 c、如果上传文件,图片,form里面添加 ...
NULL 博文链接:https://stelin.iteye.com/blog/1923987
方法一:利用iframe框架上传图片 html代码如下: <form name=uploadFrom id=uploadFrom action=upload.php method=post target=tarframe enctype=multipart/form-data> <input type=file i
百度富文本框(Ueditor)自定义图片上传接口,并解决单图片上传的跨域问题,Ueditor官方说不支持跨域上传,我想说呵呵o(* ̄︶ ̄*)o
1. 页面上传图片的部分放到一个iframe中,iframe设置无边框无滚动条,和所嵌入的页面风格一致,根据需要设置固定大小 2. 在iframe中提交上传图片的表单,提交后再次返回原页面(iframe所指向的页面)并从服务器带回刚...
我们知道,常规情况下点击浏览按钮后,是无法将客户端的图片立即显示在页面上的,这里套用iframe来实现图片上传后立即在当前页面显示
解决chrome浏览器下使用控件上传文件时出现C:\fakepath\xx路径问题,例子下载下来可以直接使用
PHP写的利用IFRAME上传图片的代码,无刷新更新
NULL 博文链接:https://wangchao1982.iteye.com/blog/623352
用这种方式上传图片、音视频等多媒体文件时,能在不跳转页面情况下看到所上传图片的预览。同时,文件相关信息通过Web服务器传递到后台数据库中,并通过内联框架子网页的服务端将文件以文件的形式存储到本地项目的...
只使用iframe上传的demo 常用方法控制 组件内置的主题 图片上传主题 主题 作者 源码 截图 imageUploader 明河 源码 refundUploader 明河 源码 loveUploader 苏河/明河 ...