这是我的代码:
HTML:
<form id="myForm" enctype="multipart/form-data" action="api/upload.php" method="POST">
<input type="hidden" />
<input id="upload" name="userfile" type="file" class="choose-file"/>
<button class="choose-picture"></button>
<div class="filename"></div>
<input type="submit" class="send-button" value='' />
</form>
<div class="progress">
<div class="bar"></div >
<div class="percent">0%</div >
</div>
<div id="status"></div>
JS:
picUpload: function() {
var bar = $(this.el).find('.bar');
var percent = $(this.el).find('.percent');
var status = $(this.el).find('#status');
$(this.el).find('#myForm').ajaxForm({
beforeSend: function() {
status.empty();
var percentVal = '0%';
bar.width(percentVal);
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
alert('upload progress!');
var percentVal = percentComplete + '%';
bar.width(percentVal);
percent.html(percentVal);
},
success: function(data) {
// console.log(data);
document.cookie = "imagePath=" + data;
var myCookie = document.cookie.replace(/(?:(?:^|.*;\s*)imagePath\s*\=\s*([^;]*).*$)|^.*$/, "$1");
console.log(myCookie);
$('.full-picture-col').html('<img src="' + data + '" class="img-responsive" />').fadeIn('slow');
$('.left-picture-col').hide();
$('.right-picture-col').hide();
},
error: function($form, options) {
alert('Wystąpił błąd!');
}
});
由于某种原因,不会调用uploadProgress函数。我在stackoverflow上看到了一些类似的问题,但它是关于IE的 - 我现在正在使用Chrome,但我仍然有这个问题。
我有最新版本的jquery.form.js。