cari

Rumah >hujung hadapan web >tutorial js >Beri perhatian kepada butiran apabila melaksanakan muat naik mudah dengan kemahiran html5+javascript_javascript

Beri perhatian kepada butiran apabila melaksanakan muat naik mudah dengan kemahiran html5+javascript_javascript

WBOY
WBOYasal
2016-05-16 15:04:532312semak imbas

Rakam secara ringkas beberapa perangkap dalam beberapa kod semasa melakukan muat naik H5 pagi ini

1 Oleh kerana fail muat naik bahagian hadapan mesti melalui borang, dan ajax tidak boleh digunakan Dalam kes ini, meletakkan input fail jenis ke dalam halaman mudah alih benar-benar tidak kelihatan sangat baik, seperti yang ditunjukkan di bawah, ia sangat tidak. mengecewakan, bukan?

Saya mencari penyelesaian pada PC menggantikan input ini dengan flash dan menggunakan pustaka alat jquery seperti uploadify untuk melakukannya, bagaimanapun, kebanyakan penyemak imbas di bahagian mudah alih tidak menyokong flash. Jadi kaedah terakhir adalah menggunakan borang borang, hanya tetapkan ketelusan borang dan input kepada 0, supaya mereka dan kandungan yang akan dipaparkan berada dalam div pada masa yang sama, dan kandungan yang dipaparkan boleh dibuat untuk melihat seperti yang anda mahukan. Kodnya adalah seperti berikut: 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  <title></title>
  <style>
   div{width: 100%;}
   .logo img{display:block; margin:0 auto;}
   .upload{position: relative;width: 80px;height: 18px;line-height: 18px;background: #2fc7c9;text-align: center;
     color: #FFF;padding: 0px 5px;-webkit-border-radius: 2px;border-radius: 2px;
     margin: 0 auto;
     }
   .upload form{width:100%;position:absolute; left:0; top:0;opacity:0; filter:alpha(opacity=0);}
   .upload form input{width: 100%;}
  </style>
 </head>
 <body>
  <div class="logo">
   <img src="img/1.jpg" />
  </div>
  <div class="upload">
   <p>上传图片</p>
   <form>
    <input type="file" />
   </form>
  </div>
 </body>
</html>

Seperti yang ditunjukkan dalam gambar, ia akan dipaparkan dalam tag p "Muat Naik Imej".

2. Kod JS

Apa yang saya tulis di sini agak mudah, saya hanya menggunakan fungsi asas muat naik h5 Kod html adalah seperti berikut. Tindakan yang saya lakukan di sini ialah memuat naik dan mengubah suai avatar apabila atribut nama teg input tidak boleh diabaikan antara muka belakang

<form id="uploadForm" enctype="multipart/form-data" method="post" action="XXXXXX">
  <input type="file" name="imageFile" id="imageFile" onchange="fileSelected()" />
</form>
Butiran menentukan kejayaan atau kegagalan, jadi ambil semua perkara dengan serius. 
var iMaxFilesize = 2097152; //2M
window.fileSelected = function() {
 var oFile = document.getElementById('imageFile').files[0]; //读取文件
 var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
 if (!rFilter.test(oFile.type)) {
  alert("文件格式必须为图片");
  return;
 }
 if (oFile.size > iMaxFilesize) {
  alert("图片大小不能超过2M");
  return;
 }
 var vFD = new FormData(document.getElementById('uploadForm')), //建立请求和数据
  oXHR = new XMLHttpRequest();
 oXHR.addEventListener('load', function(resUpload) {
  //成功
 }, false);
 oXHR.addEventListener('error', function() {
  //失败
 }, false);
 oXHR.addEventListener('abort', function() {
  //上传中断
 }, false);
 oXHR.open('POST', actionUrl);
 oXHR.send(vFD);
};
Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian 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：Analisis ringkas tentang isu keserasian penyemak imbas dalam kemahiran JavaScript_javascriptArtikel seterusnya：Analisis ringkas tentang isu keserasian penyemak imbas dalam kemahiran JavaScript_javascript

Artikel berkaitan

Lihat lagi