輸入=文件更改不起作用

-1

我有這個，我不明白爲什麼不起作用。在演示中，它工作正常。調試器不會在函數readImage（file）中輸入，並且在控制檯中this.files未定義。輸入=文件更改不起作用

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ImagesAnatation.WebForm1" %> 

<!DOCTYPE html> 
<html> 
<head> 


<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
     <script> // var url = window.URL || window.webkitURL; // alternate use 

      function readImage(file) { 

       var reader = new FileReader(); 
       var image = new Image(); 

       reader.readAsDataURL(file); 
       reader.onload = function (_file) { 
        image.src = _file.target.result;    // url.createObjectURL(file); 
        image.onload = function() { 
         var w = this.width, 
          h = this.height, 
          t = file.type,       // ext only: // file.type.split('/')[1], 
          n = file.name, 
          s = ~~(file.size/102) + 'KB'; 
         $('#uploadPreview').append('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>'); 
        }; 
        image.onerror = function() { 
         alert('Invalid file type: ' + file.type); 
        }; 
       }; 

      } 
      $("#choose").change(function (e) { 
       if (this.disabled) return alert('File upload not supported!'); 
       var F = this.files; 
       if (F && F[0]) for (var i = 0; i < F.length; i++) readImage(F[i]); 
      }); 

     </script> 
    <style>#uploadPreview img{ 
    height:400px; 
}</style> 
<meta charset=utf-8 /> 
<title>Multiple image upload with preview by Roko C.B.</title> 
</head> 
<body> 
    <input type="file" id="choose" multiple="multiple" /> 
<br> 
<div id="uploadPreview"></div> 
</body> 
</html>

也許輸入需要onchange屬性？

來源

2014-07-19 Jenia

http://jsfiddle.net/6xL4J/它的工作原理。 –

你需要用你的jQuery代碼在$(document).ready()處理，否則腳本不會找到有針對性的元素：

$(document).ready(function() { 
    function readImage(file) { 
     var reader = new FileReader(); 
     var image = new Image(); 

     reader.readAsDataURL(file); 
     reader.onload = function (_file) { 
      image.src = _file.target.result; // url.createObjectURL(file); 
      image.onload = function() { 
       var w = this.width, 
        h = this.height, 
        t = file.type, // ext only: // file.type.split('/')[1], 
        n = file.name, 
        s = ~~ (file.size/102) + 'KB'; 
       $('#uploadPreview').append('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>'); 
      }; 
      image.onerror = function() { 
       alert('Invalid file type: ' + file.type); 
      }; 
     }; 

    } 
    $("#choose").change(function (e) { 
     if (this.disabled) return alert('File upload not supported!'); 
     var F = this.files; 
     if (F && F[0]) for (var i = 0; i < F.length; i++) readImage(F[i]); 
    }); 
});

來源

2014-07-19 17:43:32

非常感謝！ – Jenia

輸入=文件更改不起作用

回答

相關問題