Rumah > Artikel > hujung hadapan web > jQuery HTML5 melaksanakan kesan pratonton imej sebelum memuat naik_jquery

jQuery HTML5 melaksanakan kesan pratonton imej sebelum memuat naik_jquery

WBOYasal: 2016-05-16 15:43:531948semak imbas

Contoh dalam artikel ini menerangkan pelaksanaan jQuery HTML5 pratonton imej sebelum memuat naik. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Di sini kami terutamanya menggunakan API Fail HTML5 untuk mencipta URL yang boleh mengakses fail, teg img kosong dengan ID img0 dan memaparkan fail yang dipilih dalam teg img untuk melaksanakan fungsi pratonton imej. Sila pilih penyemak imbas yang menyokong API HTML, seperti Google Chrome dan Firefox.

Kesan operasi adalah seperti yang ditunjukkan di bawah:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/jquery-html5-pic-upload-pre-view-codes/

Kod khusus adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
<title>HTML5上传图片预览</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery-1.6.2.min.js"></script>
</head>
<body>
<h3>请选择图片文件：JPG/GIF</h3>
<form name="form0" id="form0" >
<input type="file" name="file0" id="file0" multiple="multiple" /><br>
<img src="" id="img0" >
</form>
<script> 
$("#file0").change(function(){
 var objUrl = getObjectURL(this.files[0]) ;
 console.log("objUrl = "+objUrl) ;
 if (objUrl) {
  $("#img0").attr("src", objUrl) ;
 }
}) ;
//建立一個可存取到該file的url
function getObjectURL(file) {
 var url = null ; 
 if (window.createObjectURL!=undefined) { // basic
  url = window.createObjectURL(file) ;
 } else if (window.URL!=undefined) { // mozilla(firefox)
  url = window.URL.createObjectURL(file) ;
 } else if (window.webkitURL!=undefined) { // webkit or chrome
  url = window.webkitURL.createObjectURL(file) ;
 }
 return url ;
}
</script>
</body>
</html>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Versi web jQuery bagi kod sumber permainan pemecah bata sharing_jqueryArtikel seterusnya：Versi web jQuery bagi kod sumber permainan pemecah bata sharing_jquery

Artikel berkaitan

Lihat lagi