创建动态输入类型文件并设置其值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

回答

相关问题