創建動態輸入類型文件並設置其值Javascript

我正嘗試在服務器上傳圖片。在哪裏我需要發送圖像作爲文件。但我沒有任何形式的概念。我附加了圖像作爲div的背景，它已經存在於我的本地資產文件夾中。創建動態輸入類型文件並設置其值Javascript

我想通過使用Ajax將圖像作爲文件傳遞給服務器。

如何將一個DIV/img.src的背景圖像轉換爲文件或如果我創建的文件類型動態輸入標籤和圖像指定爲一個值，並得到其價值。

任務是如何給類型文件的動態輸入標籤賦值並獲取其值。？

function (myImage,chatId){ 


    var canvas = document.createElement("canvas"); 
     var ctx = canvas.getContext("2d"); 
     var img = new Image(); 
     img.onload = function() { 
      canvas.width = img.width; 
      canvas.height = img.height; 
      ctx.drawImage(img, 0, 0); 
      var data = canvas.toDataURL("image/png"); 
      var file = new Blob([new Uint8Array(convertDataURIToBinary(data))], {type: 'image/jpeg'}); 
      var formData = "imagesend="+file+"&chatId="+chatId+""; 
      $.ajax(
      { 
       type:"POST", 
       url:"http://suresh.pl.in/butler/public/uploadimage/getimage", 
       dataType:"json", 
       data:formData, 
       success:function(uploaded){ 
        myUpladData = uploaded; 
       }, 
       error:function(error){ 
        myUpladData = error; 
       } 
      }); 
      }; 
     img.src = myImage; 

} 



var BASE64_MARKER = ';base64,'; 

function convertDataURIToBinary(dataURI) { 
    var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length; 
    var base64 = dataURI.substring(base64Index); 
    var raw = window.atob(base64); 
    var rawLength = raw.length; 
    var array = new Uint8Array(new ArrayBuffer(rawLength)); 

    for(i = 0; i < rawLength; i++) { 
    array[i] = raw.charCodeAt(i); 
    } 
    console.info(array); 
    return array; 
}

來源

2014-03-07 Bora

後代碼的jsfiddle –

這是不是很清楚。你能否一步一步地告訴我們如何選擇這幅圖像，以及由誰和圖像的加載位置？例如，用戶選擇它嗎？如果是這樣，它如何被分配爲背景？你選擇它嗎？如果是這樣，它是如何在本地文件夾？ –

沒有人選擇任何圖像。我有資產中的圖像，我正在使用它來設置div的背景。如何按下一個ok按鈕，我想創建div的背景圖像文件和發送使用ajax – Bora

您可以從輸入標記中獲取文件obj的值。試試下面的代碼

<input type="file" id="fileInputId"></input>

選擇從瀏覽器中的文件。並嘗試以下。

jQuery("#fileInputId").files;

或

$('input[type=file]')[0].files;

來源

2014-03-07 12:35:17 Jak

謝謝，但是如何將圖像設置爲文件來輸入標籤 – Bora

出於明顯的安全原因，您不能混淆的值。 – Jak

爲什麼你想這樣做？ – Jak

創建動態輸入類型文件並設置其值Javascript

回答

相關問題