js圖片預覽，上傳，前端修改檔名
阿新 • • 發佈：2018-12-26
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<!-- IE需要es6-promise -->
<script src="/WoniuxyLearn/page/js/jquery.min.js"></script>
</head>
<script type="text/javascript">
function doIt(){
//獲取檔案物件
var file = document.querySelector("#fileDemo").files[0]
//建立新檔案物件（實現更名）
var newfile = new File([file], new Date().getTime()+".jpg",{type:"image/jpeg"});
//以下為預覽圖片程式碼
var reader = new FileReader();
reader.onload = function (oFREvent) {
document.querySelector("#uploadPreview").src = oFREvent.target.result;
};
reader.readAsDataURL(newfile);
console.log(reader);
}
//以下是上傳圖片的方法
reader.onloadend = function() {
// 這個事件在讀取結束後，無論成功或者失敗都會觸發
if (reader.error) {
console.log(reader.error);
} else {
document.getElementById("bytesRead").textContent = file.size;
// 構造 XMLHttpRequest 物件，傳送檔案 Binary 資料
var xhr = new XMLHttpRequest();
xhr.open(/* method */ "POST",
/* target url */ "upload.jsp?fileName=" + file.name
/*, async, default to true */);
xhr.overrideMimeType("application/octet-stream");
xhr.sendAsBinary(reader.result);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
console.log("upload complete");
console.log("response: " + xhr.responseText);
}
}
}
}
}
reader.readAsBinaryString(newfile);
</script>
<body>
<input type="file" id="fileDemo"><input type="button" value="預覽" onclick="doIt()"/>
<img id="uploadPreview">
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<!-- IE需要es6-promise -->
<script src="/WoniuxyLearn/page/js/jquery.min.js"></script>
</head>
<script type="text/javascript">
function doIt(){
//獲取檔案物件
var file = document.querySelector("#fileDemo").files[0]
//建立新檔案物件（實現更名）
var newfile = new File([file], new Date().getTime()+".jpg",{type:"image/jpeg"});
//以下為預覽圖片程式碼
var reader = new FileReader();
reader.onload = function (oFREvent) {
document.querySelector("#uploadPreview").src = oFREvent.target.result;
};
reader.readAsDataURL(newfile);
console.log(reader);
}
//以下是上傳圖片的方法
reader.onloadend = function() {
// 這個事件在讀取結束後，無論成功或者失敗都會觸發
if (reader.error) {
console.log(reader.error);
} else {
document.getElementById("bytesRead").textContent = file.size;
// 構造 XMLHttpRequest 物件，傳送檔案 Binary 資料
var xhr = new XMLHttpRequest();
xhr.open(/* method */ "POST",
/* target url */ "upload.jsp?fileName=" + file.name
/*, async, default to true */);
xhr.overrideMimeType("application/octet-stream");
xhr.sendAsBinary(reader.result);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
console.log("upload complete");
console.log("response: " + xhr.responseText);
}
}
}
}
}
reader.readAsBinaryString(newfile);
</script>
<body>
<input type="file" id="fileDemo"><input type="button" value="預覽" onclick="doIt()"/>
<img id="uploadPreview">
</body>
</html>