jQuery - 如何從輸入文件製作縮略圖img

我想在html中製作一個上傳圖像的系統。當用戶將圖像選入輸入文件時，圖像的縮略圖將顯示出來。正如我已閱讀，由於安全問題，沒有辦法從輸入文件中獲取圖像的路徑。有人能告訴我如何使用JavaScript（使用jQuery）？謝謝！jQuery - 如何從輸入文件製作縮略圖img

來源

2011-05-18 Cata

正如卡爾說下面，需要服務器端的參與。 – Orbling 2011-05-18 23:31:54

在將文件上傳到服務器之前，您無法訪問文件內容，除非您使用的Chrome在該區域具有一些奇特功能。

你可以做的是上傳文件，然後用PHP作爲縮略圖獲取文件，我不認爲這是你想要的答案。相反，給你一個公平的答案：不，你不能這樣做。

來源

2011-05-18 23:30:22

謝謝大家的迴應，現在好了解我的工作方式......然後如果我必須在服務器上上傳文件，我怎樣才能在不刷新頁面的情況下提交表單？有沒有使用ajax？ – Cata 2011-05-19 17:07:59

看看這個：http：//valums.com/ajax-upload/你可以不使用'onSuccess'事件來獲取圖像，最好是作爲圖像的鏈接作爲來自後端的響應。 – 2011-05-19 22:14:08

我可能有此一招：

嘗試：

<!DOCTYPE html> 
<html> 
<head> 
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script> 
<script type="text/javascript"> 
    function readURL(input) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
       $('#blah') 
         .attr('src', e.target.result) 
         .width(100) 
         .height(100); 
      }; 

      reader.readAsDataURL(input.files[0]); 
     } 
    } 
</script> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<style> 
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; } 
</style> 
</head> 
<body> 
    <input type='file' onchange="readURL(this);" /> 
    <img id="blah" src="#" alt="your image" /> 
</body> 
</html>

來源

2011-05-18 23:36:36 XGreen

對於支持FireFox（3.6+）和Chrome（7+）的瀏覽器來說，IE並不支持，即使在版本9中，Opera也沒有。所以目前還不能普遍使用，大多數HTML5都是這種情況。 – Orbling 2011-05-18 23:42:03

@Orbling：很好指出。對於跨瀏覽器的兼容性，請考慮使用Flash，Silverlight或Google Gears等進行復制。 – XGreen 2011-05-18 23:43:26

@XGreen：我發現大多數Web開發專業人員仍完全避免使用HTML5，但覆蓋率尚未達到足夠的水平。我相信，運行IE或FF低於v3.6作爲主瀏覽器的機器數量仍然大於一半。 – Orbling 2011-05-18 23:45:43

我建議使用jQuery FileFive插件： https://github.com/JDBurnZ/jquery-filefive

的Internet Explorer 10，Firefox和Chrome全部支持HTML5文件對象，它允許您讀取文件的大小，文件名和MIME類型以及文件的實際內容;如果你想要display thumbnails of selected images而沒有上傳它們，後面的內容會很有用。

工作的jsfiddle例子：http://jsfiddle.net/URqBk/

示例代碼：

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
     <script type="text/javascript" src="https://raw.github.com/JDBurnZ/jquery-filefive/master/jquery.filefive-0.1.0-rc1.min.js"></script> 
     <script type="text/javascript"> 
      $(function() { 
       $(document.body).on('change', 'input[type="file"]', function(event) { 
        var $ = $.filefive(this); 
        $.each($filefive.files(), function(offset, file) { 
         var $img = file.image(); 
         $('body').append($img); 
        } 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <form> 
      <input type="file" name="myfile" /> 
     </form> 
    </body> 
</html>

來源

2013-09-17 20:04:55

jQuery - 如何從輸入文件製作縮略圖img

回答

相關問題