javascript - 创建动态输入类型文件并设置其值 Javascript

Question

我正在尝试在服务器中上传图像。我需要将图像作为文件发送到哪里。但我没有任何形式概念。我已将图像附加为 div 的背景，该图像已存在于我的本地资源文件夹中。

我正在尝试使用 Ajax 将图像作为文件传递到服务器。

1. 如何将 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;
}

Answer 1

您可以从输入标记中获取文件 obj 的值。尝试以下代码

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

从浏览器中选择一个文件。并尝试以下操作。

jQuery("#fileInputId").files;

或

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