使用jquery.form.js上传图片或文件

这个插件是通过ajax的方式提交整个表单,然后可以返回信息到提交的页面去。要注意的是,这个插件适用于只提交图片等文件的情况,如果表单里面还有其他信息要提交的话,得看具体情况,比如说,要提交图片,返回信息,再提交表单里面的信息的时候,这个插件就不怎么适合。

 

我使用的时候是提交图片,上传完成后返回图片的id和url,显示图片。

 

jsp里面导入控件

<script type="text/javascript" src="../js/jquery-form.js"></script>
function upload1(o) {
		var hideForm = $('#insertPicForm'), $file = $(o).clone();
		hideForm.append($file);
		var options = {
			dataType : "json",
			beforeSubmit : function() {
				alert("正在上传");
			},
			success : function(result) {
				alert('成功上传!');
				var data = jQuery.parseJSON(result.result);
				document.getElementById("photoId").value = data.photoId;
				var photoUrl = document.getElementById("photoUrl");
				photoUrl.src = data.photoUrl;
				$file.remove();
			},
			error : function(result) {
				var data = jQuery.parseJSON(result.result);
				var message = data.message;
				$file.remove();
				alert(message);
			}
		};
		hideForm.ajaxSubmit(options);
		return !1;
	}

dataType是返回回来的类型。

jsp里面;

<div style="display: hidden">
	<s:form action="/theme/ajaxTheme!insert.action" method="post" id="insertPicForm" enctype="multipart/form-data">
	<input type="hidden" size="20px" id="picTag" name="picTag" />
	</s:form>
</div>

 

<input type="file" name="upload" id="upload" class="text_input"
             οnchange="upload1(this)" />

<input type="hidden" name="photoId" id="photoId" size="20px"
             value="<s:property value='photoId'/>" />
            <br>
            <img src="<s:property value="photoUrl" />" id="photoUrl"
             name="photoUrl" width="150px" height="30px" />


我用了种非常别扭的方式,把form1里面图片的信息复制到另外一个form里面,叫他form2吧,实际上我提交的是form2,但是这种方法很不好,而且有浏览器的限制问题,在火狐里面是可以用的。

 

如果是只包含图片的表单,在IE下,要注意在后台里面写上

HttpServletResponse res = ServletActionContext.getResponse();
		res.setContentType("text/html;charset=utf-8");


这样据不会出现下载窗口了。

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值