|
 |
|
ช่วยดูหน่อยครับ บทเรียนเรื่องนี้มันใช้ไม่ได้ครับ javaScript Display Preview Images Before Upload |
|
 |
|
|
 |
 |
|
จากตัวอย่าง ที่มันโชว์รูปเพราะมันรันที่ localhost ครับ
ถ้ารันที่ server ไม่น่าจะขึ้น เพราะรูปมันยังอยู่ที่เครื่อง client
|
 |
 |
 |
 |
Date :
2012-08-19 15:17:44 |
By :
nontadech |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
ลองเปลี่ยนไปใช้ jQuery ดูครับ
|
 |
 |
 |
 |
Date :
2012-08-19 16:00:46 |
By :
mr.win |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
ยังไงก็ต้อง อัฟรูปขั้นบน server ก่อน ถึงจะนำมาโชว์ได้ครับ
|
 |
 |
 |
 |
Date :
2012-08-19 16:17:45 |
By :
nontadech |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
ใช้ jQuery ทำได้ครับ ผมลองแล้วครับ
Code (jQuery)
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<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);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
<body>
<form id="form1" runat="server">
<input type='file' onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
</form>
</body>
</html>
|
 |
 |
 |
 |
Date :
2012-08-19 19:01:30 |
By :
mr.win |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
จัดให้ครับ
Code (JavaScript)
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<script type="text/javascript">
function readURL(input) {
$('#blah').attr('src', input.value); // for IE
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
<body>
<form id="form1" runat="server">
<input type='file' onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
</form>
</body>
</html>
|
 |
 |
 |
 |
Date :
2012-08-19 19:21:03 |
By :
mr.win |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
ผมได้ปกติน่ะครับ

|
 |
 |
 |
 |
Date :
2012-08-19 19:32:36 |
By :
mr.win |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
ถ้ารันผ่าน localhost จะใช้งานไม่ได้ครับ
|
 |
 |
 |
 |
Date :
2012-08-19 19:38:44 |
By :
nontadech |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
หรือว่าผมเข้าใจอะไรผิดครับ

|
 |
 |
 |
 |
Date :
2012-08-19 19:42:47 |
By :
mr.win |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
http://ประเทศไทยท่องเที่ยว.com/www/upload.html
ตามลิ้งนี้มันไม่ได้ครับ
Code (JavaScript)
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
มันเป็นการดึงจาก tmp ภาพ
แต่ใน ie
Code (JavaScript)
$('#blah').attr('src', input.value);
มันจะเรียก path ตรง
ซึ่ง path ตรง มันจะเป็น C:\Radio\Source\bg_radio3.png
ซึ่งบน server ไม่น่าจะหาเจอนะครับ เพราะรูปมันอยู่ในเครื่อง
ขอบคุณครับ
|
 |
 |
 |
 |
Date :
2012-08-19 20:03:33 |
By :
nontadech |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
ผมก็ลองได้ปกติน่ะครับ ผมเข้าใจว่ามันเป็นมุมมองฝั่ง Client น่ะครับ โดยเรียกจาก local แทนครับ แต่ไม่แน่ใจว่าจะ support version ไหนบ้าง

|
 |
 |
 |
 |
Date :
2012-08-19 20:10:30 |
By :
mr.win |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
ของผม ie 8.0.6001.18702 with XP sp3 กับ ie 9.0.8112.16421 with win 7 pro
พอดีมี 2 เครื่อง
มันไม่ขึ้นครับ งงเหมือนกัน
|
 |
 |
 |
 |
Date :
2012-08-19 20:19:21 |
By :
nontadech |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
ตัวนี้มันมีมานานแล้วครับ ตั้งแต่ IE 5,6 ครับ แต่มันมีปัญหาใช้ได้บ้างไม่ได้บ้าง อันเนื่องจากปรับแต่งค่าไม่เหมือนกันบ้างบน Web Browser ครับ และก็มีปัญหาเกี่ยวกับ Web Browser บางตัวไม่ Support ครับ จึงไม่ค่อยได้รับความนิยมเท่าไหร่ แต่ยังถือว่ามันสามารถที่จะเรียกได้ครับ
|
 |
 |
 |
 |
Date :
2012-08-19 20:28:07 |
By :
mr.win |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
ครับผม
ขอบคุณครับ
|
 |
 |
 |
 |
Date :
2012-08-19 20:35:27 |
By :
nontadech |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
ขอบคุณครับ พอเข้าใจนิดหน่อย ขอลองศึกษาดูก่อนครับ 
|
 |
 |
 |
 |
Date :
2012-08-19 21:01:01 |
By :
vinaish |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
|
|
|

|
Load balance : Server 02
|