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

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

WBOY

Lepaskan： 2016-05-16 15:04:53

asal

2288 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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);
};

Salin selepas log masuk

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.