`
lg_asus
  • 浏览: 184596 次
  • 性别: 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>";
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics