jquery ajaxSubmit实现文件上传

Screenshot-51.png
<script src="js/jquery.form.js"></script>
http://plugins.jquery.com/form/
http://malsup.github.io/jquery.form.js
function createDialog(o) {
var load = ;
load.push(
'<ul>'
+'<form enctype="multipart/form-data" method="post" id="fileForm" name="fileForm""><ul>'
+ '<li><label>所属法人机构 </label><span><input type="text" name="orgBlon" data-name="orgBlon" value="' + o.orgBlon + '" ' + o.disabled + '/></span></li>'
+ '<li><label>申请柜员号 </label><span><input type="text" name="appUser" data-name="appUser" value="' + o.appUser + '" ' + o.disabled + '/></span></li>'
+ '<li><label>实际申请人 </label><span><input type="text" name="operUser" data-name="operUser" value="' + o.operUser + '" ' + o.disabled + '/></span></li>'
+ '<li><label>申请编号 </label><span><input type="text" name="appId" data-name="appId" value="' + o.appId + '" ' + o.disabled + '/></span></li>'
+ '<li><label>用印识别码 </label><span><input type="text" name="verCod" data-name="verCod" value="' + o.verCod + '" ' + o.disabled + '/></span></li>'
+ '<li><label>标题 </label><span><input type="text" name="appTitle" data-name="appTitle" value="' + o.appTitle + '" ' + o.disabled + '/></span></li>'
+ '<li><label>印章类型id </label><span><input type="text" name="sealTypeid" data-name="sealTypeid" value="' + o.sealTypeid + '" ' + o.disabled + '/></span></li>'
+ '<li class="max"><label>文件上传</label><span><input type="file" name="myfiles" data-name="myfiles" value="' + o.myfiles + '" /></span></li>'
+ '<li><label>文件类型 </label><span><input type="text" name="fileType" data-name="fileType" value="' + o.fileType + '" ' + o.disabled + '/></span></li>'
+ '<li><label>电子文档格式 </label><span><input type="text" name="efileForm" data-name="efileForm" value="' + o.efileForm + '" ' + o.disabled + '/></span></li>'
+ '<li><label>文件名称 </label><span><input type="text" name="fileName" data-name="fileName" value="' + o.fileName + '" ' + o.disabled + '/></span></li>'
+ '<li><label>页数 </label><span><input type="text" name="pagNum" data-name="pagNum" value="' + o.pagNum + '" ' + o.disabled + '/></span></li>'
+ '<li><label>盖章页 </label><span><input type="text" name="sealPage" data-name="sealPage" value="' + o.sealPage + '" ' + o.disabled + '/></span></li>'
+ '<li><label>用章次数 </label><span><input type="text" name="useSealNum" data-name="useSealNum" value="' + o.useSealNum + '" ' + o.disabled + '/></span></li>'
+ '<li><label>摘要 </label><span><input type="text" name="appComment" data-name="appComment" value="' + o.appComment + '" ' + o.disabled + '/></span></li>'
+ '<li><label>凭证ID </label><span><input type="text" name="chnId" data-name="chnId" value="' + o.chnId + '" ' + o.disabled + '/></span></li>'
+ '<li><label>付款人账号 </label><span><input type="text" name="payAcc" data-name="payAcc" value="' + o.payAcc + '" ' + o.disabled + '/></span></li>'
+ '<li><label>凭证种类 </label><span><input type="text" name="chnTpye" data-name="chnTpye" value="' + o.chnTpye + '" ' + o.disabled + '/></span></li>'
+ '<li><label>凭证号 </label><span><input type="text" name="chnCode" data-name="chnCode" value="' + o.chnCode + '" ' + o.disabled + '/></span></li>'
+ '<li><label>金额 </label><span><input type="text" name="chnMoney" data-name="chnMoney" value="' + o.chnMoney + '" ' + o.disabled + '/></span></li>'
+ '<li><label>凭证种类 </label><span><input type="text" name="chnTpye" data-name="chnTpye" value="' + o.chnTpye + '" ' + o.disabled + '/></span></li>'
+ '<li><label>凭证日期</label><span><input type="text" name="chnDate" data-name="chnDate" value="' + o.chnDate + '" ' + o.disabled + '/></span></li>'
+ '<li class="sumbit"><button type="button" class="btn btn-warning">保存</button><button type="button" class="btn btn-reset close">取消</button></li>'
+ '</ul></form>'
);
$.tooltip({className: "sysUser", title: o.title, content: load.join('')});

var _obj = $(".sysUser"), _control = $(":input", _obj), _button = $("button:first", _obj);
// $.select(api.user.select, _control.eq(3),o.rolCode);
_button.on("click", function () {
var form = $("form[name=fileForm]");
var options = {
type:'post',
url:'http://localhost:8080/1/base/addBusSealInfo',
success:function(data){
alert('Success loading XML document');
},
error:function(data){
alert('Error loading XML document');
}
};

form.ajaxSubmit(options);
//$("#fileForm").submit();
});
}
Screenshot-52.png
@RequestMapping(value = "/addBusSealInfo", produces = "text/javascript;charset=utf-8", method = RequestMethod.POST)
@ResponseBody
@ResponseStatus(code=HttpStatus.OK,reason="success")
public Map<String, Object> addBusSealInfo(
BusSealInfoDto busSealInfoDto,@RequestParam("myfiles") MultipartFile files) throws Exception {
pSealBusInfoService.addBusSealInfo(busSealInfoDto,files);

Thread.currentThread().sleep(1000);//毫秒

HashMap<String, Object> map = new HashMap<String, Object>();
map.put(message, "");
return map;
}
Screenshot-1.png


6117c743539244c4a8b8ee8713aaf624.gif


form提交数据的同时还可以通过data传字符串数据
 ..........         

$.tooltip({className: "sysUser", title: o.title, content: load.join('')});

var _obj = $(".sysUser"), _control = $(":input", _obj), _button = $("button:first", _obj);
// $.select(api.user.select, _control.eq(3),o.rolCode);
// 选择图片修改page信息,
$("body").on('change','#upImgs', function (e) {
upFile.mUpload(e,'#upimgs');
});

_button.on("click", function () {
var form = $("form[name=fileForm]");
var _parms = $.paramsCollection(_obj);
//图片页码信息
_parms.fileInfo = upFile.toSize('#upimgs');
console.log(_parms);
var options = {
type:'post',
url:'http://localhost:8080/1/base/addBusSealInfo',
data:{"a1":JSON.stringify(_parms)},
success:function(data){
$.tooltip({result: data.message, content: data.message});
viewDataTable();
// alert('Success loading XML document');
},
error:function(data){
alert('Error loading XML document');
}
};

form.ajaxSubmit(options);
//$("#fileForm").submit();
});
Screenshot-5.png
var upFile = {
mUpload: function(e,dm){
var m_file = e.target.files;
$(dm).find('.img-item').remove();
var li='';
for(var i=0;i<m_file.length;i++){
var z = m_file[i];
var reader = new FileReader();
reader.readAsDataURL(z);
// console.log(z.name);
reader.onloadend = (function(i){
return function(){
console.log();
console.log(i);
li = '<p class="img-item"><i>'+ i.name +'</i><em><input type="text" placeholder="">页</em></p>';
$(dm).append(li);
};
})(z);
};
},
toSize: function (e) {
var imgdata = ;
$(e+ ' .img-item').each(function () {
var _this = $(this);
var page = _this.find('input').val();
var name = _this.find('i').text();
imgdata.push({
'fileName': name,
'sealPage': page
});
});
return imgdata;
}
};[/i]

Screenshot-6.png


Screenshot-3.png


Screenshot-2.png

 

1 个评论

还在研究那没用的印章啊?

要回复文章请先登录注册