HS实现txt文件上传预览
这次给大家带来HS实现txt文件上传预览，HS实现txt文件上传预览的注意事项有哪些，下面就是实战案例，一起来看一下。
今天做项目刚好碰到这个记录一下。因为是简单的txt文件，只涉及文本，如果需要涉及图片预览就需要使用papaparse和jschardet，此处不多叙述。
表单按钮使用js的onchange=”uploadfile()” 事件，function函数代码如下所示：
//此处为txt文件上传预览的js代码
function uploadfile(){
var file=$("#txt")[0].files[0];
//判断上传文件是不是txt格式,判断后缀是不是.txt
if(file.name.substr(-4).toLocaleLowerCase() != '.txt'){
alert("请上传格式为txt的文件！");
windows.location="test.jsp";//重新定位到上传txt文件页面
}
else//如果上传文件是txt文件，则显示文件的预览
{
var reader=new FileReader;
reader.readAsText(file,'gb2312');
//reader.readAsDataURL(file);
reader.onload=function(evt){
var data=evt.target.result;
$('#textarea_id').val(data);
}
}
}效果如下：
提示上传文件类型错误
补充：
js 上传文件预览
1. FILE API
html5提供了FIle和FileReader两个方法，可以读取文件信息并读取文件。
2. example
<html>
<body>
<p id="test-image-preview"
style="border: 1px solid rgb(204, 204, 204); width: 100%; height: 200px; background-size: contain; background-repeat: no-repeat; background-position: center center;"> </p>
<br/>
<p id="test-file-info"></p>
<br/>
<input type="file" id="test-image-file">
<script type="text/javascript">
var
fileInput = document.getElementById('test-image-file'),
info = document.getElementById('test-file-info'),
preview = document.getElementById('test-image-preview');
// 监听change事件:
fileInput.addEventListener('change', function () {
// 清除背景图片:
preview.style.backgroundImage = '';
// 检查文件是否选择:
if (!fileInput.value) {
info.innerHTML = '没有选择文件';
return;
}
// 获取File引用:
var file = fileInput.files[0];
// 获取File信息:
info.innerHTML = '文件: ' + file.name + '<br>' +
'大小: ' + file.size + '<br>' +
'修改: ' + file.lastModifiedDate;
if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
alert('不是有效的图片文件!');
return;
}
// 读取文件:
var reader = new FileReader();
reader.onload = function(e) {
var
data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'
preview.style.backgroundImage = 'url(' + data + ')';
};
// 以DataURL的形式读取文件:
reader.readAsDataURL(file);
});
</script>
</body>
</html>以DataURL的形式读取到的文件是一个字符串，类似于data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...，
常用于设置图像。如果需要服务器端处理，把字符串base64,后面的字符发送给服务器并用Base64解码就可以得到原始文件的二进制内容。
3. 解释
上面的代码还演示了JavaScript的一个重要的特性就是单线程执行模式。在JavaScript中，浏览器的JavaScript执行引擎在执行JavaScript代码时，总是以单线程模式执行，也就是说，任何时候，JavaScript代码都不可能同时有多于1个线程在执行。
你可能会问，单线程模式执行的JavaScript，如何处理多任务？
在JavaScript中，执行多任务实际上都是异步调用，比如上面的代码：
reader.readAsDataURL(file);
就会发起一个异步操作来读取文件内容。因为是异步操作，所以我们在JavaScript代码中就不知道什么时候操作结束，因此需要先设置一个回调函数：
reader.onload = function(e) {
// 当文件读取完成后，自动调用此函数:
};当文件读取完成后，JavaScript引擎将自动调用我们设置的回调函数。执行回调函数时，文件已经读取完毕，所以我们可以在回调函数内部安全地获得文件内容。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci HS实现txt文件上传预览. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
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
Bagaimana untuk memulihkan fail WeChat yang telah tamat tempoh Bolehkah fail WeChat yang telah tamat tempoh dipulihkan?
Feb 22, 2024 pm 02:46 PM
Buka WeChat, pilih Tetapan dalam Saya, pilih Umum dan kemudian pilih Ruang Storan, pilih Pengurusan dalam Ruang Storan, pilih perbualan di mana anda ingin memulihkan fail dan pilih ikon tanda seru. Tutorial Model Berkenaan: iPhone13 Sistem: iOS15.3 Versi: WeChat 8.0.24 Analisis 1 Mula-mula buka WeChat dan klik pilihan Tetapan pada halaman Saya. 2 Kemudian cari dan klik Pilihan Umum pada halaman tetapan. 3Kemudian klik Ruang Storan pada halaman umum. 4 Seterusnya, klik Urus pada halaman ruang storan. 5Akhir sekali, pilih perbualan di mana anda ingin memulihkan fail dan klik ikon tanda seru di sebelah kanan. Tambahan: Fail WeChat biasanya tamat tempoh dalam beberapa hari Jika fail yang diterima oleh WeChat belum diklik, sistem WeChat akan mengosongkannya selepas 72 jam Jika fail WeChat telah dilihat.
Foto tidak boleh membuka fail ini kerana format tidak disokong atau fail rosak
Feb 22, 2024 am 09:49 AM
Di Windows, apl Photos ialah cara yang mudah untuk melihat dan mengurus foto dan video. Melalui aplikasi ini, pengguna boleh mengakses fail multimedia mereka dengan mudah tanpa memasang perisian tambahan. Walau bagaimanapun, kadangkala pengguna mungkin menghadapi beberapa masalah, seperti menghadapi mesej ralat "Fail ini tidak boleh dibuka kerana format tidak disokong" semasa menggunakan apl Foto atau kerosakan fail semasa cuba membuka foto atau video. Keadaan ini boleh mengelirukan dan menyusahkan pengguna, memerlukan beberapa penyiasatan dan pembetulan untuk menyelesaikan isu tersebut. Pengguna melihat ralat berikut apabila mereka cuba membuka foto atau video pada apl Foto. Maaf, Foto tidak boleh membuka fail ini kerana format tidak disokong atau fail pada masa ini
Persediaan untuk penyingkiran mengambil masa yang lama dalam Windows 11/10
Feb 19, 2024 pm 07:42 PM
Dalam artikel ini, kami akan memperkenalkan cara menyelesaikan masalah gesaan "Bersedia untuk memadam" apabila memadam fail atau folder dalam sistem Windows. Gesaan ini bermakna sistem sedang menjalankan beberapa operasi latar belakang, seperti menyemak kebenaran fail, mengesahkan sama ada fail itu diduduki oleh program lain, mengira saiz item yang akan dipadamkan, dsb. Kami akan memberikan anda beberapa penyelesaian untuk memastikan anda berjaya memadamkan fail anda tanpa menunggu terlalu lama. Mengapakah Windows mengambil masa yang lama untuk memadam fail? Masa yang diperlukan Windows untuk menyediakan fail untuk pemadaman dipengaruhi oleh pelbagai faktor, termasuk saiz fail, kelajuan peranti storan dan proses latar belakang. Gesaan "Bersedia untuk memadam" yang panjang atau tersekat mungkin menunjukkan sumber sistem yang tidak mencukupi, ralat cakera atau isu sistem fail. wujud
Bolehkah fail format Tmp dipadamkan?
Feb 24, 2024 pm 04:33 PM
Fail format Tmp ialah format fail sementara yang biasanya dihasilkan oleh sistem atau program komputer semasa pelaksanaan. Tujuan fail ini adalah untuk menyimpan data sementara untuk membantu program berjalan dengan betul atau meningkatkan prestasi. Sebaik sahaja pelaksanaan program selesai atau komputer dimulakan semula, fail tmp ini selalunya tidak diperlukan lagi. Oleh itu, untuk fail format Tmp, ia pada asasnya boleh dipadam. Selain itu, pemadaman fail tmp ini boleh mengosongkan ruang cakera keras dan memastikan operasi normal komputer. Walau bagaimanapun, sebelum memadam fail format Tmp, kita perlu
Bagaimana untuk memasang fail GHO
Feb 19, 2024 pm 10:06 PM
Fail gho ialah fail imej GhostImage, yang biasanya digunakan untuk menyandarkan keseluruhan cakera keras atau data partition ke dalam fail. Dalam beberapa kes tertentu, kami perlu memasang semula fail gho ini kembali ke cakera keras untuk memulihkan cakera keras atau partition kepada keadaan sebelumnya. Berikut akan memperkenalkan cara memasang fail gho. Pertama, sebelum pemasangan, kita perlu menyediakan alat dan bahan berikut: Fail gho entiti: Pastikan anda mempunyai fail gho yang lengkap, yang biasanya mempunyai akhiran .gho dan mengandungi sandaran
Apa yang perlu dilakukan jika kod ralat 0x80004005 muncul Editor akan mengajar anda cara menyelesaikan kod ralat 0x80004005.
Mar 21, 2024 pm 09:17 PM
Apabila memadam atau menyahmampat folder pada komputer anda, kadangkala kotak dialog segera "Ralat 0x80004005: Ralat Tidak Ditentukan" akan muncul Bagaimana anda harus menyelesaikan situasi ini? Sebenarnya terdapat banyak sebab mengapa kod ralat 0x80004005 digesa, tetapi kebanyakannya disebabkan oleh virus. Kami boleh mendaftarkan semula dll untuk menyelesaikan masalah tersebut . Sesetengah pengguna digesa dengan kod ralat 0X80004005 apabila menggunakan komputer mereka Ralat 0x80004005 disebabkan terutamanya oleh komputer tidak mendaftarkan fail perpustakaan pautan dinamik tertentu dengan betul, atau oleh tembok api yang tidak membenarkan sambungan HTTPS antara komputer dan Internet. Jadi bagaimana pula
Bagaimana untuk memindahkan fail dari Cakera Awan Quark ke Cakera Awan Baidu?
Mar 14, 2024 pm 02:07 PM
Quark Netdisk dan Baidu Netdisk pada masa ini merupakan perisian Netdisk yang paling biasa digunakan untuk menyimpan fail Jika anda ingin menyimpan fail dalam Quark Netdisk ke Baidu Netdisk, bagaimana anda melakukannya? Dalam isu ini, editor telah menyusun langkah tutorial untuk memindahkan fail dari komputer Quark Network Disk ke Baidu Network Disk Mari kita lihat cara mengendalikannya. Bagaimana untuk menyimpan fail dari Cakera Rangkaian Quark ke Cakera Rangkaian Baidu? Untuk memindahkan fail daripada Cakera Rangkaian Quark ke Cakera Rangkaian Baidu, anda perlu memuat turun fail yang diperlukan terlebih dahulu daripada Cakera Rangkaian Quark, kemudian pilih folder sasaran dalam klien Cakera Rangkaian Baidu dan bukanya. Kemudian, seret dan lepaskan fail yang dimuat turun daripada Cakera Awan Quark ke dalam folder yang dibuka oleh klien Cakera Awan Baidu, atau gunakan fungsi muat naik untuk menambah fail pada Cakera Awan Baidu. Pastikan anda menyemak sama ada fail telah berjaya dipindahkan dalam Cakera Awan Baidu selepas muat naik selesai. Itu sahaja
Penggunaan garis miring dan garis miring belakang yang berbeza dalam laluan fail
Feb 26, 2024 pm 04:36 PM
Laluan fail ialah rentetan yang digunakan oleh sistem pengendalian untuk mengenal pasti dan mencari fail atau folder. Dalam laluan fail, terdapat dua simbol biasa yang memisahkan laluan, iaitu garis miring ke hadapan (/) dan garis miring ke belakang (). Kedua-dua simbol ini mempunyai kegunaan dan makna yang berbeza dalam sistem pengendalian yang berbeza. Garis miring ke hadapan (/) ialah pemisah laluan yang biasa digunakan dalam sistem Unix dan Linux. Pada sistem ini, laluan fail bermula dari direktori akar (/) dan dipisahkan oleh garis miring ke hadapan antara setiap direktori. Sebagai contoh, laluan /home/user/Docume
