Question

注意：我是javascript的新手我有以下代码，允许用户在上传之前预览图像输入元素工作正常，所选图像按预期显示但是，拖放会引发错误，

未捕获的TypeError：无法读取属性＆＃39;文件＆＃39;未定义的

我认为我正在以错误的方式删除文件对象，我们将非常感谢任何帮助。

＆＃13;

(function($){
  $(document).ready(function(){
    function renderImage(file)
    {
    var reader = new FileReader();
     reader.onload = function(event) {
    the_url = event.target.result
       $('#preview').html("<img width='150px' height = '100px'src='" + the_url + "' />")
       }
     reader.readAsDataURL(file);
    }
    //This is for the input and works fine.
    $('#file').change( function (){
       renderImage(this.files[0])
	 });
    //The drag is the one with problem.
    //it produces the following error
    /*
    *Uncaught TypeError: Cannot read property 'files' of undefined
    */
    $("#drop").on('dragenter', function (e){
	e.preventDefault();
	$(this).css('background', '#BBD5B8');
	});

	$("#drop").on('dragover', function (e){
	e.preventDefault();
	});

	$("#drop").on('drop', function (e){
	$(this).css('background', '#D8F9D3');
	 e.stopPropagation();
    e.preventDefault();
      var dt = e.target.files || (e.dataTransfer && e.dataTransfer.files);
  var files = dt.files;
  renderImage(files);
	
	});
  });
})(jQuery)

＆＃13;

#drop
{
 width:300px;
 height:100px;
 border:dotted 1px;
 border-radius:5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id = "upload">
  <div id = "drop">
    </div>
  <input type ="file" id = "file">
  <div id = "preview">
    </div>
</div>

＆＃13;

Answer 1

我的建议是，我还纠正了＆＃34;未捕获的TypeError：无法读取属性＆＃39;文件＆＃39;未定义＆＃34; （仅限FF才能使输入字段加倍）：

＆＃13;

(function($){
  $(document).ready(function() {
    function renderImage(file)
    {
      var reader = new FileReader();
      reader.onload = function(event) {
        the_url = event.target.result
        $('#preview').html("<img width='150px' height = '100px'src='" + the_url + "' />")
      }
      reader.readAsDataURL(file);
    }
    //This is for the input and works fine.
    $('input[type^="file"]').change( function (){
      renderImage(this.files[0])
    });
    //The drag is the one with problem.
    //it produces the following error
    /*
                 *Uncaught TypeError: Cannot read property 'files' of undefined
                 */
    $("#drop").on('dragenter', function (e){
      event.target.style.background = '#BBD5B8';
    });
    $("#drop").on('dragover', function (e){
      e.preventDefault();
    });
    $("#drop").on('drop', function (e){
      event.target.style.background = '#D8F9D3';
      e.stopPropagation();
      e.preventDefault();
      var dt = (e.originalEvent.target.files && e.originalEvent.target.files.length > 0) || (e.originalEvent.dataTransfer && e.originalEvent.dataTransfer.files);
      var files = dt[0];
      renderImage(files);

    });
  });
})(jQuery);

＆＃13;

#drop
{
  width:300px;
  height:100px;
  border:dotted 1px;
  border-radius:5px;
}
#drop input {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  opacity: 0.0;
  filter: alpha(opacity=0);
  font-size: 300px;
  height: 100px;
}
#drop label {
  position: absolute;
  top: 40px;
  width: 250px;
  text-align: center;
}

＆＃13;

<script src="http://code.jquery.com/jquery-1.11.3.js"></script>

<div id="upload">
    <div id="drop">
        <label id="fileLbl">Drop a file here</label>
        <input type ="file" id = "file1">
    </div>
    <input type ="file" id = "file2">
    <div id = "preview">
    </div>
</div>

＆＃13;

Answer 2

我认为问题出在您的HTML上。尝试在#drop div

中移动输入

<div id = "upload">
  <div id = "drop">
   <input type ="file" id = "file">
  </div>
  <div id = "preview">
  </div>
</div>

拖放不会按预期发送数据

2 个答案: