jquery.fileupload 文件上传

1.引入文件

<script src="/assets/global/plugins/jquery-file-upload/js/vendor/jquery.ui.widget.js" type="text/javascript"></script>
<script src="/assets/global/plugins/jquery-file-upload/js/jquery.iframe-transport.js" type="text/javascript"></script>
<script src="/assets/global/plugins/jquery-file-upload/js/jquery.fileupload.js" type="text/javascript"></script>

 

2.文件代码

<div class="fileinput fileinput-new" data-provides="fileinput">
	<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
		<img src="/static/images/no_img.png" alt="" />
	</div>
	<div id="editRenterNegativeCardImageShow" class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
	<div>
		<span class="btn green btn-file">
			<span class="fileinput-new"> 选择身份证 </span>
			<span class="fileinput-exists"> 重选 </span>
			<input id="editRenterNegativeCardImage" name="editRenterCardImage" type="file">
		</span>
		<a href="javascript:;" class="btn red fileinput-exists" data-dismiss="fileinput" onclick="javascript:$('#editRenterNegativeCardImage').removeData('upload');"> 删除 </a>
	</div>
</div>

3. 初始化js

$('#editRenterNegativeCardImage').fileupload({
        url: '/img/file/rest/images',
        //是否自动上传
        autoUpload: true,
        //文件格式限制
        acceptFileTypes: /(.|\/)(jpe?g|png)$/i,
        maxNumberOfFiles: 1,//最大上传文件数目
        dataType: 'json',
        add: function (e, data) {
            // 删除多余表单参数
            $(this).fileupload('option', 'formData', {});
            data.submit();
        },
        done: function (e, data) {
            if (data.result) {
                $("#" + e.target.id).data("upload", data.result.data.zvs[0].guid);
            }
        }
 });

需要注意的是文件上传js 必须再用之前先初始化，如果上传图片做form表单，默认会提交表单数据，不想提交表单数据使用

$(this).fileupload('option', 'formData', {});

删除即可

 

动态设置路径

$(selector).fileupload('option', 'url', '/tcs_pdf_upload/rest/temp/contract/model/upload/');

 

$(selector).fileupload({
		url:  '',
		//是否自动上传
		autoUpload: false,
		//文件格式限制
		acceptFileTypes: /(\.|\/)(pdf)$/i,
		maxNumberOfFiles: 1,//最大上传文件数目
		dataType: 'json',
		paramName : 'uploadContractPDF',
		add: function (e, data) {
			
			var acceptFileTypes = $(selector).fileupload('option').acceptFileTypes;
			// 判断文件类型
			if (data.originalFiles[0]['type'].length && acceptFileTypes && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
				$('.uploadBtn', '#uploadContractTemplateWin').unbind('click');
				OssUtil.bootboxAlert({
					message : '请选择需要上传的pdf文件'
				});
				$('.fileinput', '#uploadContractTemplateWin').fileinput('reset');
				return;
			}
			
			$('.uploadBtn', '#uploadContractTemplateWin').unbind('click').bind('click', function () {
				
				$(selector).fileupload('option', 'url', '/tcs_pdf_upload/rest/temp/contract/model/upload/' + OssUtil.getApiToken() + '/' + $('#uploadContractTemplateWin').data('id'));
				
				$('#modalAjax').modal('show');
				
				data.submit();
			});
		},
		done: function (e, data) {
			if (data.result) {
				$('#modalAjax').modal('hide');
				if (data.result.ret == 0) {
					$('.fileinput', '#uploadContractTemplateWin').fileinput('reset');
					$('#uploadContractTemplateWin').modal('hide');
					OssUtil.bootboxAlert({message : '上传成功!'});
				} else {
					OssUtil.bootboxAlert({message : '上传失败：' + data.result.msg});
				}
			}
		},
		fail: function(e, data) {
			$('#modalAjax').modal('hide');
			OssUtil.bootboxAlert({message : '上传失败!'});
		}
	});