好吧,這是我正在嘗試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