javascript - 在从客户端 Jquery Laravel 上传之前预先调整多个图像的大小
问题描述
代码部分工作,它收集图像并在循环中将它们调整为base64,但是当我将其附加到表单中时,我没有得到要发送的图像......但是当我通过删除调整大小功能发布简单的图片时,它会发送每张图片...我不明白这是什么问题..
继承人的html:
Upload Pictures <input type="file" name="file[]" id="file" multiple/>
这里我正在收集图片:
<script>
$(document).on('change','#file',function(){
files = this.files;
ajax_file_upload(files);
});
</script>
这是我在循环中调整它们大小并通过ajax发送它们的代码:注意:在调整大小函数中,我正在控制台中获取调整大小的图片......我还将附上控制台图片......
<script>
function ajax_file_upload(file_obj) {
if(file_obj != undefined) {
var status='true';
var image = new FormData();
var match = ['image/jpeg', 'image/png', 'image/jpg'];
for(i=0; i<file_obj.length; i++) {
var fileType = file_obj[i].type;
// alert(fileType)
if(!((fileType == match[0]) || (fileType == match[1]) || (fileType == match[2]) || (fileType == match[3]) || (fileType == match[4]) || (fileType == match[5]))){
var status='false';
}
resizeImages(file_obj[i],function(dataUrl){
image.append('file[]',dataUrl);
});
}
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
url: "{{ route('resize') }}",
type: "POST",
// data: {pictures:pictures},
data:image,
cache:false,
processData: false,
contentType: false,
datatype:'html',
success: function (response) {
return true;
}
});
}
}
</script>
这里是我用来调整图像大小并获取 dataurl 的 resize 函数:
<script>
function resizeImages(file,complete) {
// read file as dataUrl
//////// 2. Read the file as a data Url
var reader = new FileReader();
// file read
reader.onload = function(e) {
// create img to store data url
////// 3 - 1 Create image object for canvas to use
var img = new Image();
img.onload = function() {
/////////// 3-2 send image object to function for manipulation
complete(resizeInCanvas(img));
};
img.src = e.target.result;
}
// read file
reader.readAsDataURL(file);
}
function resizeInCanvas(img){
///////// 3-3 manipulate image
var perferedWidth = 1200;
var ratio = perferedWidth / img.width;
var canvas = $("<canvas>")[0];
canvas.width = img.width * ratio;
canvas.height = img.height * ratio;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0,0,canvas.width, canvas.height);
//////////4. export as dataUrl
return canvas.toDataURL('image/jpeg', 0.6);
}
</script>
此功能运行良好...现在当我将其发送到服务器时,它没有发布任何内容.. 尝试了很多研究方法,但没有得到任何东西.. 请指导我谢谢
解决方案
所以,我没有任何帮助,但我设法通过使用 tweeks 解决了这个问题......我发布它们是为了帮助某人......谢谢
在这里,我正在挑选图片并将其传递给调整大小并将它们推送到数组中:
$(document).on('change','#selectfile',function(){
file_obj = this.files;
pictures_array(file_obj);
});
这里是用于调整大小并将其存储在数组中的函数,我在这里限制 ajax 函数运行,直到数组中的计数不等于经过一些验证的文件的长度..:
function pictures_array(file_obj){
var image_count = $('.sequence').length-1;
count = file_obj.length;
var new_count = image_count+count;
console.log(image_count,new_count,count);
if(new_count<=15){
$('.ajax-loader').css("visibility", "visible");
pictures = [];
for(i=0; i<file_obj.length; i++) {
var fileType = file_obj[i].type;
var match = ['image/jpeg', 'image/png', 'image/jpg'];
if(!((fileType == match[0]) || (fileType == match[1]) || (fileType == match[2]) || (fileType == match[3]) || (fileType == match[4]) || (fileType == match[5]))){
var status='false';
}
resizeImages(file_obj[i],function(dataUrl){
var data = dataUrl;
pictures.push(data);
if(!--count) {
ajax(pictures);
}
});
}
}else{
$('#max_limit').html(15);
$('#limit').show();
$('html, body').animate({
scrollTop: $(".main-image").offset().top
}, 2000);
$('#selectfile').val('');
$('#selectfile1').val('');
}
}
继承 ajax 调用:我正在使用文件 [] 中的 for 循环附加 base64 版本的图片:
function ajax(pictures) {
// console.log(pictures);
var image = new FormData();
var pictures = pictures;
for (var i = 0; i < pictures.length; i++) {
image.append('file[]',pictures[i]);
}
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
// 'Content-Type': 'multipart/form-data',
},
url: "{{ route('images_private.store',$row->id) }}",
type: "POST",
data: image,
cache: false,
processData: false,
contentType: false,
datatype: 'html',
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
success:function(response) {
$('#selectfile').val('');
$('#selectfile1').val('');
$('#appendhtml').html(response);
// $('#appendhtml').load('#appendhtml');
setTimeout(function() {
toastr.options = {
closeButton: true,
progressBar: true,
showMethod: 'slideDown',
timeOut: 4000
};
toastr.success('Images uploaded successfully');
}, 1300);
$("#other-image-main").sortable({
cursor: 'move',
opacity: 0.6,
update: function() {
sendOrderToServer();
}
});
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
$('#valid_image_type').hide();
},
});
}
然后是控制器的最后一步:这里我将 base64 解码为 jpeg 文件并将其存储到服务器中:
if(!File::isDirectory($path)){
File::makeDirectory($path, 0777, true, true);
}
if($request->has('file')){
foreach ($request->file as $image){
$position++;
list($type, $image) = explode(';', $image);
list(, $image) = explode(',', $image);
$image = base64_decode($image);
$source_img = imagecreatefromstring($image);
$filename= uniqid() . '.jpg';
$filepath = $path.$filename ;
$imageSave = imagejpeg($source_img, $filepath);
ImagesPrivate::create([
'user_id'=>$id,
'owner_id'=>$auth,
'name'=>$filename,
'position'=>$position,
'position_change'=>$position,
'delete' => 'pending',
]);
}
}
所以,到底4.8MB的图片现在重316KB就成功了,,,
我发布这个是因为我没有找到类似的东西,我花了一些时间来做这个,,,可能是我没有正确研究,但这就是我设法在客户端上传多个预先调整大小的图像而没有任何触发按钮...将上传时间缩短到 90%...
希望对某人有所帮助谢谢问候
推荐阅读
- android - Flutter 程序不显示图像
- amazon-web-services - 当我尝试附加我创建的规则组时,wafv2 webacl cloudformation 出现错误
- flutter - Flutter - NoSuchMethodError:在 null 上调用了 getter 'isNotEmpty'
- docker - 错误:不可满足的约束:在 alpine docker 文件中更新包时
- azure - PowerShell 版本及其管理 Azure Active Directory 的能力有什么区别?
- oauth - 谷歌登录响应没有 idToken ionic4
- javascript - 引导导航栏折叠不适用于捆绑的引导文件
- java - 使用 IntelliJ 编译器 Maven
- powershell - Powershell将制表符分隔的CSV转换为不带引号的逗号分隔的CSV
- python - 如何让“随机”模块工作?我是否忘记导入某些内容,还是需要安装任何内容?