Изменение размера изображения и установка его в файл ввода

Question

Im с помощью jquery для изменения размера изображения при загрузке, эта работа прекрасна. Но моя проблема в том, что я хочу отправить измененное изображение, и я хочу установить данные нового изображения в свой входной файл, чтобы отправить его на сервер. Но я не смог этого добиться. каждый раз, когда он отправляет большой файл. Вот мой код:

<div> 
        <input name="photo" type="file"/>      
        <p><span></span></p> 
        <i></i> 
       </div> 
       <script> 

        $().ready(function() { 


         $("input[name*='photo']").change(function(e) { 
          var file = e.target.files[0]; 

          // RESET 
          $('#area p span').css('width', 0 + "%").html(''); 
          $('#area img, #area canvas').remove(); 


          // CANVAS RESIZING 
          $.canvasResize(file, { 
           width: 300, 
           height: 0, 
           crop: false, 
           quality: 80, 
           //rotate: 90, 
           callback: function(data, width, height) { 

            // SHOW AS AN IMAGE 


            $('<img>').load(function() { 

             $(this).css({ 
              'margin': '10px auto', 
              'width': width, 
              'height': height 
             }).appendTo('#area div'); 

            }).attr('src', data); 

            // here i am trying to assign the resized data to my image from my input file 


            $(this).files[0] = data; 

           } 
          }); 

         }); 
        }); 
       </script> 

       <script src="jqLibrary/jquery.exif.js"></script> 
       <script src="jqLibrary/jquery.canvasResize.js"></script> 
       <script src="jqLibrary/canvasResize.js"></script> 
      </div> 

Answer 1

На самом деле я заставить его работать, используя FileReader, а затем передать данные на холст и затем подачи через javascritp удаленного доступа, так как я использовал Force.com platform.Here является частью кода:

function uploadFile() { 
    var file = document.getElementById('attachmentFile').files[0]; 
    if(file != undefined) { 
    if(file.size <= maxFileSize) { 
    attachmentName = file.name; 
var fileReader = new FileReader(); 
fileReader.onloadend = function(e) { 
    var tempImg = new Image(); 
    var dataURL; 
    tempImg.src = this.result; 
    tempImg.onload = function() { 
     var MAX_WIDTH = 400; 
     var MAX_HEIGHT = 300; 
     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.getElementById('myCanvas'); 
    canvas.width = tempW; 
    canvas.height = tempH; 
    var ctx = canvas.getContext("2d"); 
      ctx.drawImage(this, 0, 0, tempW, tempH); 
    attachment = canvas.toDataURL("image/jpeg");     
    attachment = attachment.slice(23); 
    positionIndex=0; 
    fileSize = attachment.length; 
      //this is a function to post the data 
    uploadAttachment(null); 
     }    
} 
    fileReader.readAsDataURL(file); 

важной частью был тип чтения файла (readAsDataURL)

Answer 2

Мы не можем asssign значение обратно в InputField по соображениям безопасности проверить эту ссылку: How to set a value to a file input in HTML?