Terminal mudah alih HTML5 merealisasikan muat naik fail_HTML/Xhtml_Pengeluaran halaman web-html tutorial-php.cn

Terminal mudah alih HTML5 merealisasikan muat naik fail_HTML/Xhtml_Pengeluaran halaman web

WBOY

Lepaskan： 2016-05-16 16:36:06

asal

1363 orang telah melayarinya

Kebanyakan fail yang dimuat naik pada bahagian PC menggunakan pemalam Tidak mengapa jika anda memperkenalkan flash Namun, jika bahagian mudah alih masih menggunakan pelbagai pemalam berlebihan, ia mungkin akan disembur sehingga mati untuk mempunyai fungsi memuat naik imej, memandangkan H5 sudah mempunyai antara muka yang berkaitan Dan keserasian adalah baik, sudah tentu keutamaan diberikan kepada penggunaan H5 untuk pelaksanaan.

Teknologi utama yang digunakan ialah:

ajax

Pembaca Fail

FormData

Struktur HTML:

Kod XML/HTMLSalin kandungan ke papan keratan

<div kelas="kawasan kamera">
<bentuk enctype="multipart/ form-data" kaedah="post">
<input taip="fail" nama="failUntukMuat Naik" kelas="fileToUpload" terima="imej/*" tangkap="kamera"/>
<div kelas="muat naik- kemajuan"><span>span>div>
borang>
<div kelas="ibu jari" >div>
div>

Muat naik.js yang dibungkus bergantung pada zepto

Kod JavaScriptSalin kandungan ke papan keratan

(fungsi($) {
$.extend($.fn, {
Muat naik fail: fungsi(pilihan) {
ini.setiap(fungsi() {
var $self = $(ini);
var doms = {
"fileToUpload": $self.find(".fileToUpload"),
"ibu jari": $self.find(".ibu jari"),
"kemajuan": $self.find(".upload-progress") 🎜>
};
var keseronokan = {
//选择文件，获取文件大小，也可以在这里获取文开件，取文廏非要求格式的文件
"fail Dipilih": fungsi() {
var fail = (doms.fileToUpload)[0].files;
var count = files.length;
untuk (var indeks = 0; indeks < kiraan; < indeks ) { >
var fail = fail[indeks];
var Saiz fail = 0;
jika (saiz.fail > 1024 * 1024)
'MB''MB''MB'
lain
Saiz fail = (Math.round(file.size * 100 / 1024) / 100).toString() 'KB'
funs.uploadFile();
},
//Muat naik fail secara tidak segerak
muat naikFail: fungsi() {
var fd = baharu FormData();//Buat objek data borang
var fail = (doms.fileToUpload)[0].fail
var kiraan = fail.panjang
untuk (var indeks = 0; indeks < kiraan; indeks ) {
var fail = fail[indeks];
fd.append(opts.file, fail);//Tambahkan fail pada data borang
funs.previewImage(file);//Preview imej sebelum memuat naik, atau pratonton txt melalui kaedah lain
var xhr = baharu XMLHttpRequest(
"kemajuan", funs.uploadProgress, false); // Pantau kemajuan muat naik
"muat", funs.uploadComplete, false);
"error", opts.uploadFailed, false);
"POST", opts.url;
//Pratonton fail
pratontonImej: fungsi(fail) {
var galeri = doms.thumb
var img = document.createElement("img");
pembaca = baharu FileReader( reader.onload = (
(aImg) {
fungsi(e) { aImg.src = e.target.hasil;
},
uploadProgress:
(evt) {
jika (evt.lengthComputable) {
var peratusLengkap = Math.round(evt.loaded * 100 / evt.total);
'%'
},
:
(evt) {
makluman(evt.target.responseText) };
doms.fileToUpload.on("ubah", fungsi() {
doms.progress.find("span").lebar("0"); >
funs.fileSelected();
});
});
}
});
})(Zepto);

Kaedah panggilan:

Kod JavaScript

Salin kandungan ke papan keratan

".kawasan-kamera").failMuat Naik({
"url": "savetofile.php",
"fail": "Fail saya" });

Bahagian PHP:

Kod PHP

Salin kandungan ke papan keratan

jika (isset($_FILES['myFile'])) {
// Contoh: tulisLog(
$_FAIL); move_uploaded_file(
$_FILES['myFile']['tmp_name'], "muat naik/" $_FILES['myFile'<🎜. >]['nama']); gema
'berjaya'; }
writeLog(
){ jika(
($log) | |. ialah_objek($log)){ $log = json_encode(
); }
=
."rn";
(
, $log,FILE_APPEND); } ?>
Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.

Teks asal: http://www.cnblogs.com/hutuzhu/p/5254532.html