好吧,这是我正在尝试acchomplish,(截至现在)我有用户选择图像和图像的大小,并上传到服务器。我想要做的是在图像被选择并调整大小后停止脚本。然后,我想创建一个函数来上传我选择时调整大小的图像。原因是我打算在我的表单中添加更多输入文本,并且用户已完成完成,然后我想要使用这些文件上传图像。注:我还没有添加文字输入会做后只是希望能够sepearate上传functions..I我不知道如何单独的FORMDATA后部分发送表单数据分开
JAVASCRIPT
<script>
function ResizeMe(){
var dataurl = null;
var uniq = 'id' + (new Date()).getTime();
var filesToUpload = document.getElementById('input').files;
var file = filesToUpload[0];
// Create an image
var img = document.createElement("img");
// Create a file reader
var reader = new FileReader();
// Set the image once loaded into file reader
reader.onload = function(e)
{
img.src = e.target.result;
img.onload = function() {
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var MAX_WIDTH = 200;
var MAX_HEIGHT = 400;
var width = img.width;
var height = img.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH/width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT/height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
dataurl = canvas.toDataURL("image/jpeg",.2);
var blobBin = atob(dataurl.split(',')[1]);
var array = [];
for(var i = 0; i < blobBin.length; i++) {
array.push(blobBin.charCodeAt(i));
}
var files = new Blob([new Uint8Array(array)], {type: 'image/jpg', name: "ddd"});
// Post the data
var fd = new FormData();
fd.append("image", files, uniq);
$.ajax({
url: 'http:///www.***/upload.php',
data: fd,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
$('#form_input')[0].reset();
location.reload();
}
});
} // img.onload
}
// Load files into file reader
reader.readAsDataURL(file);
}
</script>
调用'ResizeMe()'多少次?是否会有多个画布等待一次发送? – Howzieky
只有一次在应用程序结束。它会发送1张图片和所收集的所有表格数据 – INOH
只有1张画布将它发送给我,因为用户可能会选择拍摄不同的图片。但在应用程序结束时,我希望从表单中上传所有数据,并将1图像/画布全部上传到图像以将文件夹和数据上传到mySQL – INOH