是否可以在通過表單上傳之前預覽本地圖像？
[英]is it possible to preview local images before uploading them via a form?
問題描述
更具體地說，我想使用帶有一個或多個用於圖像的文件輸入字段的表單。 當這些字段發生更改時，我想在將數據發送到服務器之前顯示相關圖像的預覽。
我嘗試了許多 javascript 方法，但總是遇到安全錯誤。 我不介意使用 java 或 flash，只要對於那些沒有它們的用戶來說，解決方案會優雅地降級。 （他們不會得到預覽，也不會得到煩人的“安裝這個東西”。）
有沒有人以一種簡單、可重用的方式做到這一點？
PS 我知道有一個沙箱，但沙箱是否必須在一個黑暗的、上鎖的房間里，所有的窗戶都被塗黑了？
6 個解決方案
解決方案1
31 2011-10-03 16:17:46
不需要花哨的東西。 您所需要的只是createObjectURL函數，它創建一個可以用作圖像src的 URL，並且可以直接來自本地文件。
假設您使用文件輸入元素 ( <input type="file" /> ) 從用戶的計算機中選擇了幾張圖像。 以下是為其創建圖像文件預覽的方法：
function createObjectURL(object) {
return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object);
}
function revokeObjectURL(url) {
return (window.URL) ? window.URL.revokeObjectURL(url) : window.webkitURL.revokeObjectURL(url);
}
function myUploadOnChangeFunction() {
if(this.files.length) {
for(var i in this.files) {
var src = createObjectURL(this.files[i]);
var image = new Image();
image.src = src;
// Do whatever you want with your image, it's just like any other image
// but it displays directly from the user machine, not the server!
}
}
}
解決方案2
1 2009-05-28 18:43:40
第一步是找出圖像路徑。 JavaScript 可以查詢文件名/路徑的上傳控件，但是（出於安全原因）各種瀏覽器向 JS 引擎顯示的內容與向用戶顯示的內容不同 - 它們傾向於保持文件名完整，因此您至少可以驗證它的擴展名，但你可能會得到c:\\fake_path\\或一些類似的混淆的東西c:\\fake_path\\到文件名。 在各種瀏覽器上嘗試此操作將使您了解返回為真實路徑的內容，以及偽造的內容以及位置。
第二步是顯示圖像。 如果您知道本地圖像的路徑，則可以通過帶有file://源 URL 的img標簽顯示本地圖像，如果用戶的瀏覽器允許file://方案。 （默認情況下，Firefox 不會。）因此，如果您能讓用戶告訴您圖像的完整路徑是什么，您至少可以嘗試加載它。
解決方案3
0 2015-02-16 09:27:27
您可以嘗試這種方法，盡管它似乎不適用於 IE。
http://saravani.wordpress.com/2012/03/14/preview-of-an-image-before-it-is-uploaded/
編碼簡單快速。
我把代碼放在這里以防萬一源死了：
腳本：
<!-- Assume jQuery is loaded -->
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img_prev')
.attr('src', e.target.result)
.width(150)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
在 HTML 中：
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<input type='file' onchange="readURL(this);" />
<img id="img_prev" src="#" alt="your image" />
</body>
解決方案4
0 2009-05-28 17:39:33
這是一個用於上傳圖像和預覽它 的 jQuery + PHP 腳本。
解決方案5
0 2009-05-28 18:33:46
出於安全目的，JavaScript 無法訪問本地文件系統。
解決方案6
0 2009-05-28 18:47:50
我只見過這樣做的 Java 小程序，例如 Facebook 上的圖像上傳小程序。 Java 方法的缺點是在運行之前會提示用戶信任小程序，這是一種煩惱，但這允許小程序向文件瀏覽器顯示圖像預覽或做更有趣的事情，例如允許用戶上傳整個目錄。
使用JavaScript在Microsoft Edge中無法上傳之前預覽圖像
[英]Preview images before uploading using JavaScript not working in Microsoft Edge
在使用jquery和ajax上傳圖像之前，先顯示多個圖像
[英]Getting multiple images to display before uploading them using jquery and ajax
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.