-1
對不起，與以前要求的版本不太一樣。我嘗試過這些解決方案無濟於事。代碼在JSfiddle中有效，但在我的網頁上停止
我曾與一些人一起解決了一些我們正在處理的問題。最後讓它在JSfiddle上工作，我們需要它，但無論出於何種原因，它不適用於純HTML網站。該內容看起來加載，但預覽後選擇一個圖像不起作用。
這裏是的jsfiddle在這裏工作：http://jsfiddle.net/ELcf6/568/
這裏是所有編譯成用於測試單個頁面的代碼片斷。這是似乎不起作用的例子。 JSfiddle是否注入了我可能缺少的任何先決條件？
任何幫助搞清楚這將不勝感激。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var imageLoader = document.getElementById('filePhoto');
imageLoader.addEventListener('change', handleImage, false);
function handleImage(e) {
\t \t var filetype = imageLoader.files[0].type;
var reader = new FileReader();
reader.onload = function (event) {
if(filetype.indexOf("image") > -1){
$('.uploader img').attr('src',event.target.result);
}else if(filetype.indexOf("video") > -1){
$('.uploader video')[0].src =reader.result;
}
}
reader.readAsDataURL(e.target.files[0]);
}
</script>
<style type="text/css">
.uploader {
position:relative;
overflow:hidden;
width:300px;
height:350px;
background:#f3f3f3;
border:2px dashed #e8e8e8;
}
#filePhoto{
position:absolute;
width:300px;
height:400px;
top:-50px;
left:0;
z-index:2;
opacity:0;
cursor:pointer;
}
.uploader img,.uploader video{
position:absolute;
width:302px;
height:352px;
top:-1px;
left:-1px;
z-index:1;
border:none;
object-fit:cover;
}
</style>
<title></title>
</head>
<body>
<div class="uploader" onclick="$('#filePhoto').click()">
click here or drag here your images for preview and set userprofile_picture data
<img src=""/>
<video></video>
<input type="file" name="userprofile_picture" id="filePhoto" />
</div>
</body>
</html>
你在網站上的控制檯中看到什麼錯誤？請注意，您的代碼也被包裝在jsFiddle的onload處理程序中。你在網站上做的是一樣的嗎？ – j08691
唯一的錯誤與未知變量有關。像斯科特建議的那樣將腳本移到頁面下面解決了這個問題。 – fbords
這是解決問題的一種方法。另一個是將代碼封裝在document.ready或window.load調用中，就像jQuery默認的那樣。你只是沒有看到這是默認的。將代碼加載到頁面的末尾是jsFiddle中的另一個選項。 – j08691