hujung hadapan web
tutorial js
Muat naik pratonton imej skrip JS Fail input pratonton imej pelaksanaan kemahiran example_javascript
Muat naik pratonton imej skrip JS Fail input pratonton imej pelaksanaan kemahiran example_javascript
Apabila mengerjakan projek di Shenzhen, kami memerlukan fungsi untuk pengguna memuat naik pratonton avatar! Saya telah mencari banyak dalam talian, tetapi tidak begitu berpuas hati. Sama ada ia adalah kilat, atau ia mengembalikan laluan imej selepas muat naik Ajax, atau ia tidak boleh digunakan. Nasib baik, seseorang telah menulis fungsi pratonton gambar sebelum projek ini, dan saya telah membuat rekod di sini untuk kemudahan saya pada masa hadapan, dan untuk kemudahan rakan lain yang memerlukannya.
Kod ini sangat mudah, seperti berikut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>By：DragonDean</title>
<script type="text/javascript">
//下面用于图片上传预览功能
function setImagePreview(avalue) {
var docObj=document.getElementById("doc");
var imgObjPreview=document.getElementById("preview");
if(docObj.files &&docObj.files[0])
{
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '150px';
imgObjPreview.style.height = '180px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}
else
{
//IE下，使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "150px";
localImagId.style.height = "180px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
try{
localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}
catch(e)
{
alert("您上传的图片格式不正确，请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="101" align="center">
<div id="localImag"><img id="preview" src="http://blog.chuangling.net/Public/images/top.jpg" width="150" height="180" style="display: block; width: 150px; height: 180px;"></div>
</td>
</tr>
<tr>
<td align="center" style="padding-top:10px;"><input type="file" name="file" id="doc" style="width:150px;" onchange="javascript:setImagePreview();"></td>
</tr>
</tbody>
</table>
</body>
</html>Ujian berfungsi pada IE8, FF12.0 dan Google Chrome 28.0.1500.72!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1389
52
Bagaimana untuk melaksanakan tatal imej dan pratonton lakaran kecil dalam Vue?
Aug 18, 2023 pm 01:51 PM
Bagaimana untuk melaksanakan tatal imej dan pratonton lakaran kecil dalam Vue? Dalam projek Vue, kami selalunya perlu memaparkan sejumlah besar gambar, dan berharap pengguna boleh menyemak imbas dan pratonton gambar ini dengan mudah. Artikel ini akan memperkenalkan cara menggunakan komponen Vue untuk melaksanakan fungsi tatal imej dan pratonton lakaran kenit. Pertama, kita perlu memasang dan memperkenalkan perpustakaan Vue yang sesuai untuk memudahkan penatalan imej dan pratonton lakaran kenit. Dalam contoh ini, kami akan menggunakan vue-awesome-swiper dan vue-image-preview dua perpustakaan untuk melaksanakan
Bagaimana untuk menyiarkan gambar pada komen Douyin
Feb 19, 2024 pm 01:10 PM
Sebagai salah satu platform perkongsian video pendek paling popular di dunia, Douyin telah menarik ratusan juta pengguna untuk menyertainya. Apabila melihat karya hebat orang lain, kita sering terharu dengan beberapa detik dinamik, menarik atau bermakna di dalamnya. Pada masa ini, kita bukan sahaja boleh meluahkan pendapat dan fikiran melalui komen teks, tetapi juga meluahkan emosi kita dengan lebih jelas melalui komen bergambar. Jadi, bagaimana untuk menyiarkan ulasan gambar di TikTok? Mula-mula, buka APP Douyin dan masukkan video yang anda minati. Seterusnya, kita perlu menentukan sistem pengendalian telefon bimbit mengikut perbezaan
Akses Awal kepada Ciri Masa Depan Pratonton Teknologi Safari 173 Dikeluarkan
Jul 02, 2023 pm 01:37 PM
Apple hari ini mengeluarkan Safari Technology Preview versi 173, yang merangkumi beberapa ciri yang mungkin dilancarkan dalam Safari 17. Versi ini sesuai untuk versi beta macOS Sonoma dan sistem macOS Ventura yang berminat boleh memuat turunnya dari tapak web rasmi. Pratonton Teknologi Safari versi 173 menambah blok bendera ciri dalam tetapan, menggantikan ciri percubaan dalam menu pembangunan asal. Bahagian ini membolehkan pembangun mencari ciri khusus dengan pantas dan menandakan status sebagai "stabil", "tersedia untuk ujian", "pratonton" atau "pembangun" dengan cara yang berbeza. Menu pembangunan yang direka bentuk semula memudahkan pencipta mencari alatan utama untuk membina halaman web, aplikasi web, kandungan web dalam aplikasi lain,
Cara melaksanakan muat naik imej borang dan pratonton dalam pemprosesan borang Vue
Aug 10, 2023 am 11:57 AM
Cara melaksanakan muat naik imej borang dan pratonton dalam pemprosesan borang Vue Pengenalan: Dalam aplikasi web moden, pemprosesan borang adalah keperluan yang sangat biasa. Satu keperluan biasa ialah membenarkan pengguna memuat naik imej dan melihatnya dalam bentuk. Sebagai rangka kerja bahagian hadapan, Vue.js menyediakan kami pelbagai alatan dan kaedah untuk mencapai keperluan ini. Dalam artikel ini, saya akan menunjukkan kepada anda cara melaksanakan fungsi muat naik dan pratonton imej dalam pemprosesan borang Vue. Langkah 1: Tentukan komponen Vue Pertama, kita perlu mentakrifkan kumpulan Vue
Bagaimana untuk memuat naik dan melihat imej melalui Vue?
Aug 19, 2023 pm 09:25 PM
Bagaimana untuk memuat naik dan melihat imej melalui Vue? Gambaran Keseluruhan: Dalam aplikasi web moden, muat naik imej dan pratonton adalah keperluan biasa. Vue, sebagai rangka kerja JavaScript yang popular, menyediakan cara yang mudah untuk melaksanakan fungsi ini. Artikel ini akan memperkenalkan cara menggunakan Vue untuk memuat naik dan pratonton imej, termasuk reka bentuk antara muka bahagian hadapan dan pemprosesan antara muka bahagian belakang. Reka bentuk antara muka hadapan: Pertama, kita perlu mereka bentuk antara muka hadapan untuk memilih dan memuat naik imej. Dalam Vue, kita boleh menggunakan <i
Bagaimana untuk melaksanakan muat naik imej dan pratonton dalam uniapp
Oct 21, 2023 am 11:48 AM
Bagaimana untuk melaksanakan muat naik imej dan pratonton dalam uniapp Dalam rangkaian sosial moden dan aplikasi e-dagang, muat naik imej dan fungsi pratonton adalah keperluan yang sangat biasa. Artikel ini akan memperkenalkan cara melaksanakan fungsi muat naik dan pratonton imej dalam uniapp dan memberikan contoh kod khusus. 1. Pelaksanaan fungsi muat naik imej Dalam projek uniapp, anda perlu menambah komponen muat naik imej pada halaman, seperti yang ditunjukkan di bawah: <template><lihat><im
Apakah yang perlu saya lakukan jika semuanya tidak dapat dipaparkan semasa pratonton dan pencetakan?
Mar 01, 2023 pm 02:45 PM
Penyelesaian kepada masalah bahawa semuanya tidak dapat dipaparkan semasa pratonton dan pencetakan: 1. Buka borang Pejabat WPS dan klik "Pratonton Cetak" di sudut kiri atas kawasan bar kerja 2. Masukkan halaman pratonton cetakan dan klik "Nisbah Skala"; ; 3. Dalam senarai juntai bawah yang muncul Pilih nisbah yang berkenaan daripada "Lanskap" atau "Potret".
Selesaikan masalah pelaporan ralat program pratonton win11
Jan 14, 2024 pm 05:33 PM
Kami boleh mengemas kini dan menaik taraf sistem windows 11 dalam program pratonton sistem windows, tetapi ramai rakan telah menemui kod ralat 0x0 apabila menyertai program pratonton Ini kerana sistem kami kehilangan sebahagian daripada pendaftaran Untuk menyelesaikannya, mari kita lihat bersama-sama. Cara menangani ralat dalam program pratonton win11 Kaedah 1: 1. Jika sistem kami bukan versi sistem terkini, kami boleh cuba mengemas kini dalam kemas kini sistem. Kaedah 2: 1. Ralat juga mungkin menjadi masalah dengan registri Kita boleh cuba menggunakan alat pembaikan pendaftaran untuk membaikinya. Kaedah ketiga: 1. Muat turun sistem win11 terus dari tapak ini dan pasangkannya. 2. Selepas memuat turun, pasang sahaja mengikut tutorial yang disediakan di laman web ini.
