我正在尝试使用blueimp/Jquery-fileupload发送两个输入文件,我将autoUpload
设置为false
,按钮将触发发送,但它失败,我不知道发生了什么因为根本没有错误。
这是我的代码:
<form name="frmData" id="frmData" enctype="multipart/form-data">
<div class="field-input">
<span class="container-icon"></span>
<input type="text" name="name" class="" placeholder="Name" />
</div>
<div class="field-input">
<span class="container-icon"></span>
<textarea name="description" placeholder="Description" class=""></textarea>
</div>
<div class="container-input">
<span class="btn btn-default fileinput-button">
<i class="fa fa-picture-o"></i>
<span>Imagen</span>
<input type="file" name="picture" id="picture" class=""/>
</span>
<div id="preview_picture" class="files">
<div></div>
</div>
</div>
<div class="container-input">
<span class="btn btn-default fileinput-button">
<i class="fa fa-file-image-o"></i>
<span>Logo</span>
<input type="file" name="photo" id="photo" class=""/>
</span>
<div id="preview_photo" class="files">
<div></div>
</div>
</div>
<button type="button" class="btn btn-success" id="btnSend">Send</button>
</form>
<script type="text/javascript">
var fileUploader, fileUploadList = [], paramNames = [];
fileUploader = $('#frmData').fileupload({
url: urlSendData,
fileInput: $("input:file"),
dataType: 'json',
autoUpload: false,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize: 999000,
// Enable image resizing, except for Android and Opera,
// which actually support image resizing, but fail to
// send Blob objects via XHR requests:
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator.userAgent),
previewMaxWidth: 100,
previewMaxHeight: 100,
previewCrop: true
}).on("fileuploadadd", function(e, data){
data.context = $('#preview_'+e.delegatedEvent.target.name);
fileUploadList[e.delegatedEvent.target.name] = data.files[0];
paramNames[e.delegatedEvent.target.name] = e.delegatedEvent.target.name;
}).on('fileuploadprocessalways', function (e, data) {
var index = data.index,
file = data.files[index],
node = $(data.context.children()[index]);
if (file.preview) {
node.html(file.preview);
}
if (file.error) {
node.html($('<span class="text-danger"/>').text(file.error));
}
}).on('fileuploadprogressall', function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
}).on('fileuploaddone', function (e, data) {
console.log(e);
console.log(data);
}).on('fileuploadfail', function (e, data) {
console.log(e);
console.log(data);
}).bind('fileuploadprocessdone', function (e, data) {
console.log(e);
console.log(data);
}).bind('fileuploadprocessfail', function (e, data) {
console.log(e);
console.log(data);
}).prop('disabled', !$.support.fileInput)
.addClass($.support.fileInput ? undefined : 'disabled');
$('#btnSend').click(function() {
console.log('sendData');
fileUploader.fileupload('send', {
files: fileUploadList,
paramName: paramNames,
formData: {
name: $('input[name=name]').val(),
description: $('textarea[name=description]').val()
}
})
.success(function (result, textStatus, jqXHR) {
console.log(result);
})
.error(function (jqXHR, textStatus, errorThrown) { //*** It always fire
console.log(jqXHR); // *** but no info about the error
console.log(textStatus);
console.log(errorThrown);
});
});
</script>