[英]styled input (type=file) submitting upon click with jquery .change event for reading selected files
I have been debugging this for quite some time already, but to no avail. 我已经调试了很长一段时间,但无济于事。
Works perfectly fine on Google chrome but not on other browsers. 在Google chrome上可以正常运行,但在其他浏览器上则不能。 On other browsers, upon click on the " Add Attachment " button, the page submits ( w/c is clearly not supposed to happen as file upload should happen async )
在其他浏览器上,单击“ 添加附件 ”按钮后,页面提交(显然不应该发生w / c,因为文件上传应该异步发生)
HTML CODE: HTML代码:
<form id="upload-form" method="POST" enctype="multipart/form-data" class="">
<button class="btn btn-outline btn-default btn-sm btn-file">
<span class="glyphicon glyphicon-plus"></span> Add Attachment <input id="select-file" type="file" name="file[]" multiple />
</button>
<button id="upload-file" class="btn btn-outline btn-default btn-sm">
<span class="glyphicon glyphicon-upload"></span> Upload
</button>
</form>
JQuery CODE: jQuery代码:
var ajaxRequest = function(type, url, data){
$.ajax({
type: type,
url: url,
xhr: function(){
var myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){
myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
}
return myXhr;
},
data: data,
success: function(data, status){
if(data.status == true){
$("#upload-result").addClass('font-green')
$("#upload-result").html(data.text);
setTimeout(function(){removeUploadPreviewDOM();}, 1500);
setTimeout(function(){location.reload(true);}, 500);
}else{
$("#upload-result").addClass('font-red')
$("#upload-result").html(data.text);
$("#upload-form").trigger('reset');
removeUploadPreviewDOM();
}
//setTimeout(function(){location.reload(true);}, 1500);
},
error: function(xhr, status, err){
alert(status + ': ' + err );
},
cache: false,
contentType: false,
processData: false
});
$("#select-file").change(function(){
var files = this.files;
Files = files;
for(i=0; i<files.length; i++){
readFile(files[i]);
}
});
function readFile(file) {
if(window.FileReader){
var reader = new FileReader();
reader.onload = function (e) {
var oPreviewDiv = $( '#upload-preview' );
var aFile = [e.target.result, file.name, (file.size/1024), file.type];
var oFileUploadBox = singleFileInfoBox(aFile);
oPreviewDiv.append(oFileUploadBox);
};
reader.readAsDataURL(file);
}
}
$("#upload-file").click(function(e){
e.preventDefault();
var currUrl = window.location.toString();
var ticketno = currUrl.substr(currUrl.lastIndexOf("/")+1,12);
var type = 'POST';
var url = sUrl + 'upload_file/' + ticketno;
var data = new FormData($("#upload-form")[0]);
//SHOW/CREATE PROGRESS BAR BEFORE AJAX REQUEST
generateProgressPreview();
ajaxRequest(type, url, data);
});
Ooopss.. I just found out the answer to my own question. 糟糕,我刚刚找到了自己问题的答案。 Aparently there is no problem with the jquery codes, the problem is the mark up.
显然,jQuery代码没有问题,问题在于标记。
by default button tags, submits the page to the server and since the input type=file is with in the button tags, it submits the page. 默认情况下,按钮标签将页面提交到服务器,并且由于输入type = file在按钮标签中包含,因此它将提交页面。
to correct the problem i did this. 为了解决这个问题,我做到了。
<span class="btn btn-outline btn-default btn-sm btn-file">
<span class="glyphicon glyphicon-plus"></span> Add Attachment <input id="select-file" type="file" name="file[]" multiple />
</span>
Hopes this help to others too, who might encounter the same problem. 希望这也对可能遇到相同问题的其他人有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.