iframe上传图片

最新推荐文章于 2022-03-22 16:26:48 发布

qojnbbqtg

最新推荐文章于 2022-03-22 16:26:48 发布

阅读量159

点赞数

分类专栏：代码片段文章标签： JavaScript ViewUI

本文链接：https://blog.csdn.net/qojnbbqtg/article/details/84813911

版权

代码片段专栏收录该内容

4 篇文章 0 订阅

订阅专栏


$.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>";