Отправить formData seperatly

Question

Хорошо, это то, что я пытаюсь усвоить, (по состоянию на данный момент) У меня есть пользователь, который выбирает изображение, и изображение изменяется и загружается на сервер. Я хотел бы сделать это после того, как изображение будет выбрано и изменено, а затем остановите скрипт. Затем я хотел бы создать функцию для загрузки измененного изображения, когда я захочу. Причина в том, что я собираюсь добавить больше текстов ввода в мою форму, и пользователь завершил выполнение. Затем я хочу загрузить изображение с файлами. Примечание: Я не добавил текстовые материалы будут делать после того, как хотят, чтобы иметь возможность загружать 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> 

Answer 1

Код отправка formdata is

$.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(); 
    } 
}); 

Этот код - это код, который вы хотите поместить в отдельную функцию. Чтобы переместить его в другое место, вы должны убедиться, что он все еще имеет доступ ко всем передаваемым переменным, а именно: fd. fd связан с несколькими переменными, все они возвращаются к canvas. Вы говорите, что будет только один холст за раз, поэтому мы можем сделать canvas глобальной переменной, а затем получить fd из любого места будет легко.

<script> 
    //Moved to global so that sendFormStuff will see it 
    var canvas = document.createElement("canvas"); 
    var ctx = canvas.getContext("2d"); 
    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() { 

     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; 
     ctx.drawImage(img, 0, 0, width, height); 
     } // img.onload 
    } 
    function sendFormStuff() { 
     var 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(); 
     } 
     }); 
    } 
    // Load files into file reader 
    reader.readAsDataURL(file); 
    } 
</script> 

Так на самом деле все, что мы сделали здесь был перенесите код запроса в отдельную функцию, и сделать canvas и ctx (которые вы объявляли дважды, кстати), доступную этой функции.