javascript - 直接文件上传 Javascript

Question

如何在不单击文件上传按钮的情况下直接上传文件(我想单击添加小部件按钮，该按钮应该给出文件上传对话框)

我有一个按钮声明如下:

<button class="add-button" style="float:top;">Add Widget</button>

单击按钮后，将调用以下函数

    $(".add-button").on("click", function() {


  // get selected color value
  var color = $color_picker.val();

  // build the widget, including a class for the selected color value
  var $widget = $('<li>', {
      'class': 'color_' + color
    })
    .append($('<button>', {
      'class': 'delete-button',
      'text':'-'
    }))
    .append($('<img src="abc.png" height="60px" width="60px">'));

  // add widget to the grid
  gridster.add_widget($widget, 1, 1);

});

但我首先希望出现一个上传框，用户可以在单击按钮后立即上传图像，然后应执行上述代码

我做了这样的事情

 $(".add-button").on("click", function() {

    var x = document.createElement("INPUT");
     x.setAttribute("type", "file");
     x.setAttribute("onclick","previewFile()");



  // get selected color value
  var color = $color_picker.val();

  // build the widget, including a class for the selected color value
  var $widget = $('<li>', {
      'class': 'color_' + color
    })
    .append($('<button>', {
      'class': 'delete-button',
      'text':'-'
    }))
    .append($('<img src="abc.png" height="60px" width="60px">'));

  // add widget to the grid
  gridster.add_widget($widget, 1, 1);

});

但这不会带来任何用户可以上传图像的对话框

我想用这张上传的图片来代替

    .append($('uploaded image'));

预览文件功能(这个也需要修改)

function previewFile() {
  var preview = document.createElement('img');

  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();    //API for reading file stored on user computer

  reader.addEventListener("load", function () {    //"load" :This eventlisterner "listens" loading of file. Once it is loaded function is triggered
    preview.src = reader.result;   
  });

  if (file) {
    reader.readAsDataURL(file);    // helps in reading the content of "file"
  }


  document.body.appendChild(preview);
}

我的目标是预览文件功能应该返回一个我可以放入的图像

    .append($('image from preview file'));

代码版本位于Fiddle

Answer 1

做到这一点的方法是在 dom 上的某个位置有一些带有文件类型的隐藏输入。您也许可以通过编程方式将其放在那里，但实际上没有意义。单击“添加小部件”按钮后，您可以模拟隐藏输入的单击。这将启动选择文件的提示。然后您要做的就是等待用户“选择”文件。这是通过 onchange 事件完成的。在其中，您可以抓取文件并读取它，完成后您可以通过 onload 方法进行回调。我贴了一个working example这里。我想您希望将该文件选为 src 上的图像集，所以我也这样做了。

隐藏输入

    <input id="test" type="file" style="position: absolute; top: -10; left: -10; height: 0; width: 0;" />

按钮点击函数(这是等待文件被选择的函数)，回调方法用于文件读取器的onload事件。

$(".add-button").on("click", function() {

    $('#test').click();

  $('#test').on('change', function(e) {
    var test = document.getElementById('test');

    if (!test) {
      alert("Um, couldn't find the fileinput element.");
    }
    else if (!test.files) {
      alert("This browser doesn't seem to support the `files` property of file inputs.");
    }
    else if (!test.files[0]) {
      alert("Please select a file before clicking 'Load'");               
    }
    else {
      file = test.files[0];
      console.log(file);
      fr = new FileReader();
      fr.readAsDataURL(file); 
      fr.onload = function() {
        var data = fr.result;  // data <-- in this var you have the file data in Base64 format
        callbackAddButton(data);
        test.value = ''; //here we are resetting the file input's files
        $('#test').replaceWith($('#test').clone()); //here we are resetting the input, if we clone the input with the files then it wont trigger the onchange event if you upload same image. So we need to make sure we have these 2 calls. 
      };
    }
  })
});

最后是回调方法。这正是您之前所拥有的，但现在只有在文件完成后才会被调用(完成后，您通过文件读取器读取它，并在需要时可以访问内容)。这里唯一的区别是现在您拥有用户上传的图像的 Base64 表示形式。我将其设置为您创建的新图像小部件。

 function callbackAddButton(file) {
 // get selected color value
  var color = $color_picker.val();

  // build the widget, including a class for the selected color value
  var $widget = $('<li>', {
      'class': 'color_' + color
    })
    .append($('<button>', {
      'class': 'delete-button',
      'text':'-'
    }))
   .append($(`<img src="${file}" height="60px" width="60px">`));

  // add widget to the grid
  gridster.add_widget($widget, 1, 1);
}

编辑完成输入文件元素后，最好现在清除它，因为您不再需要该文件(至少从输入中，因为您有一个 Base64 表示形式)。只需在进行回调调用后附加一个 $('#test').replaceWith($('#test').clone()) 即可。