Question

我一直在尝试按照以下要求实施图片上传：

拖放
在弹出窗口中显示已删除的图像，并带有调整图像大小的选项
预览后上传图片并调整大小

我试图将我的选项限制为bass jobsen's jqueryupload。使用这个插件，我到目前为止设法做了类似的事情：

$('document).on('drop', '#drop_area', function(event) {
    var file_input = $('<input>').attr({type: 'file', 'id': 'hidden_file_input'});
    $('body').append(file_input.hide());

    var file = event.originalEvent.dataTransfer.files[0];
    var file_reader = new FileReader();

    file_reader.onloadend = function(e) {
       var src = file_reader.result;
       file_upload_preview();
    }
    file_reader.readAsDataUrl(file);
    $file_input[0][files][0] = file; // this line only works 5% of the time
});

function file_upload_preview() {
   self.modal_show('/modal/preview', function(e) { // render popup using file /modal/preview.html
          // do image crop options
   });
   doUpload();
}

function doUpload() {
   var file_input = $('#upload_form_id');
   var file = file_input.get(0).files[0]; // throws error because of $file_input[0][files][0] = file; not working
   var url = '/tmp/uploads';
   var data = {
       'x' : file_input.data('x') // image resize dimension
       // add others, etc.
   };
   // do validations
   file_input.upload(url, data, function(json) { // jqueryupload start
      var res = JSON.parse(json); // throws error if the above code doesn't
   });
}

我在使用此代码时出现多个错误： 1. $ file_input [0] [files] [0] = file; 这一行并不总是因某种原因而起作用 2.如果＃1没有发生，尝试上传时会抛出另一个错误：无法处理空的Imagick对象

鉴于这种情况，我可以通过拖放而不是选择文件来设置file_input值的最佳和最可靠的方法是什么？还可以使用这个插件实现我需要的东西吗？欢迎大家提出意见。谢谢你提前。

Answer 1

javascript问题

有几个问题

$file_input[0]files[0]应该选择File对象，而不是$file_input[0][files][0]，其中files属性的括号是语法错误;
无法将File对象设置为<input type="file">元素的FileList对象，其中$file_input[0][files][0] = file; // this line only works 5% of the time尝试将已删除的文件var file = event.originalEvent.dataTransfer.files[0];设置为动态创建的.files[0]元素<input type="file">;

var file_input = $('<input>').attr({type: 'file', 'id': 'hidden_file_input'});

var file_input = $('#upload_form_id')不是用户

#drop_area

修改，更新

将文件拖放到main.html 2.将文件添加到呈现的弹出窗口 - preview.html 3.上传

main.html中

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js">
  </script>
  <style>
    #dropzone {
      display: block;
      width: 400px;
      height: 200px;
      border: 1px solid blue;
      text-align: center;
      font-size: 36px;
    }
  </style>
  <script>
    function handleDrop(event) {
      var file = event.dataTransfer.files[0];
      // copy dropped file
      // note, not necessary though requirement
      var copy = file.slice();
      // create objectURL of `copy`
      var url = URL.createObjectURL(copy);
      // open `preview.html`
      var preview = window
                    .open("preview.html"
                         , "preview"
                         , "width=400,height=400,resizable=yes,scrollbars=yes");
      // set `img` at `preview.html` to `copy` 
      // at `DOMContenetLoaded` event of `peview
      $(preview).on("DOMContentLoaded", function(e) {
        // set `img` `src` to `url`:`copy` of `file` at `preview.html`
        $(e.target.body).find("img").attr("src", url);
        // remove `disabled` for ability to close `preview`
        $("button:eq(1)").removeAttr("disabled")
      });
      $("button:eq(1)").on("click", function() {
        // close `preview`
        preview.close();
        // revoke objectURL
        URL.revokeObjectURL(url);
        $(this).attr("disabled", true)
        // remove `disabled` at previous `button`
        // for ability to upload file
        .prev("button").removeAttr("disabled")
      });
      $("button:eq(0)").on("click", function() {
        // create `FormData` object to `POST`
        var data = new FormData();
        data.append("file", file);
        console.log(data.get("file"));
        $(this).attr("disabled", true)
          // do ajax stuff, post file
          // $.ajax({
          //    type:"POST",
          //    processData:false,
          //    data: data
          // })
      });

    }
  </script>
</head>

<body>
  <div id="dropzone" 
  ondragenter="event.stopPropagation(); event.preventDefault();" 
  ondragover="event.stopPropagation(); event.preventDefault();" 
  ondrop="event.stopPropagation(); event.preventDefault();handleDrop(event)">
    Drop files
  </div>
  <button disabled="">upload</button>
  <button disabled="">close preview</button>
</body>

</html>

preview.html

<!DOCTYPE html>
<html>
  <body>
    <img src="">
  </body>
</html>

plnkr http://plnkr.co/edit/Cij0bUojvfhUNZjRw4FM?p=preview

Answer 2

我认为，readAsDataUrl()是异步操作的错误原因，您必须等待它完成其余的工作。您可以尝试以下代码：

file_reader.onload = function(e) {
    if(reader.readyState == FileReader.DONE) //You can remove this if not needed
        alert(file.name);
    }
}

没有按钮的文件输入

2 个答案: