问题描述
resizeAndUpload: function (file) {
var $row = filemanager.renderFileUploadRow(file,current_dir);
var action_url = $('#actionUrl').html();
//the thumbnail in the upload line
var thumb = $('img',$row);
$('#fmg_upload_progress').append($row);
$row.find('.progress').css('width',0 + '%');
var form = $("#fmg_file_form");
var form_data = new FormData();
form_data.append('to_do','upload_resize');
//form_data.append('file_data',file);//file is not required with resize
form_data.append('folder',current_dir);
form_data.append('filename',file.name);
var reader = new FileReader();
reader.onloadend = function (ev) {
thumb.attr('src',reader.result);
var tempImg = new Image();
tempImg.src = reader.result;
tempImg.onload = function (e) {
var MAX_WIDTH = 1600;
var MAX_HEIGHT = 1200;
var tempW = tempImg.width;
var tempH = tempImg.height;
if (tempW > tempH) {
if (tempW > MAX_WIDTH) {
tempH *= MAX_WIDTH / tempW;
tempW = MAX_WIDTH;
}
} else {
if (tempH > MAX_HEIGHT) {
tempW *= MAX_HEIGHT / tempH;
tempH = MAX_HEIGHT;
}
}
var canvas = document.createElement('canvas');
canvas.width = tempW;
canvas.height = tempH;
var ctx = canvas.getContext("2d");
console.log('tempW and tempH ' + tempW + ' ' + tempH);
ctx.drawImage(this,tempW,tempH);
var dataURL = canvas.toDataURL("image/jpeg");
//form_data.append('image',dataURL);
form_data.append('image',dataURL);
document.getElementById('output').src = dataURL;
//each time an ajax request is made cpt is increased
//will be decreased on complete
cpt += 1;
$.ajax({
dataType: 'json',type: 'post',data: form_data,url: "filemanager/manage",processData: false,contentType: false,xhr: function () {
xhr = new window.XMLHttpRequest(); //new
xhr.upload.addEventListener('progress',function (e) {
if (e.lengthComputable) {
percent = e.loaded / e.total * 100;
console.log("percent is " + percent);
$row.find('.progress').css('width',(percent | 0) + '%');
}
});
// on load remove the progress bar
xhr.upload.onload = function () {
$row.remove();
};
// return the customized object
return xhr;
},success: function (data) {
// console.log('success decreasing cpt ' + cpt + '--' + data['message']);
if (cpt > 0) {
cpt -= 1;
}
// console.log(data['message']);
},error: function (request,status,errorThrown) {
if (cpt > 0) {
cpt -= 1;
}
alert('error dans upload and resize: ' + errorThrown + ' !!S');
},complete: function (request,status) {
//when all uploads are over
//console.log('complete ' + cpt);
if (cpt === 0) {
$('#fmg_upload_progress').fadeOut(4000);
$('#fmg_file_form').fadeIn(8000);
$('.custom-file-label').html('');
filemanager.list(current_dir);
}
filemanager.list(current_dir);
}
});
};
};
reader.readAsDataURL(file);
//reader.readAsBinaryString(file);
},此脚本通过遍历multipart / formdata输入文件的循环来调用。 每次上传文件时，页面上都会显示一个进度栏。
case 'upload_resize':
$fullName = $request->input('folder') . DIRECTORY_SEParaTOR . $request->input('filename');
$pos = strrpos($fullName,'.');
$fullName = substr($fullName,$pos) . '.jpeg';
list($type,$data) = explode(';',$data);
list(,$data) = explode(',',$data);
$data = base64_decode($data); //return the length
//return the nb of char stored
$success = file_put_contents($fullName,$data);
$message = $success
? 'File saved --' . $success . ' bytes'
: 'Unable to save the file.';
$response = array('message' => $message);
break;
当我使用Chromium作为浏览器时，尽管我真的没有时间查看进度条，因为服务器是本地的，但是事情运行得很顺利。
但是当我使用Firefox时，存储后的图像完全空白（白色背景）。
我该怎么办？
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）