モバイル端末HTML5でファイルアップロード_HTML/Xhtml_Webページ制作を実現

PC 側でアップロードされるほとんどのファイルは、Flash を導入しても問題ありません。ただし、モバイル側でさまざまな冗長なプラグインが使用されている場合、プロジェクトは無駄になる可能性があります。 H5 には既に関連するインターフェイスが備わっているため、画像をアップロードする機能を持たせる必要があります。当然、実装には H5 を使用することが優先されます。

使用される主なテクノロジーは次のとおりです:

ajax

ファイルリーダー

フォームデータ

HTML 構造:

XML/HTML コードコンテンツをクリップボードにコピー

1. <div class="カメラエリア">
2. <form enctype="multipart/フォームデータ" メソッド="post">
3. <入力 type="file" 名前="fileToUpload" クラス="fileToUpload" accept="image/*" キャプチャ="カメラ"/>
4. <div class="upload-進捗"><スパン>スパン>div>
5. フォーム>
6. <div class="親指" >div>
7. div>

パッケージ化されたupload.jsはzeptoに依存します

JavaScript コードコンテンツをクリップボードにコピーします

1. (関数($) {
2. $.extend($.fn, {
3. fileUpload: 関数(opts) {
4. this.each(function() {
5. var $self = $(this);   
6. var doms = {
7. "fileToUpload": $self.find(".fileToUpload"),
8. "thumb": $self.find(".thumb"),
9. "progress": $self.find(".upload-progress")
10. };   
11. var 楽しい = {
12. //选择文件、获取文件大小、这里获取文件格式、制限用户上传非要求格式的文件
13. "fileSelected": 関数() {
14. var files = (doms.fileToUpload)[0].files;   
15. var count = files.length;   
16. for (var index = 0; index < count; index ) {
17. var file = files[index];   
18. var fileSize = 0;   
19. if (file.size > 1024 * 1024)
20. fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() 'MB';   
21. else
22. fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() 'KB';   
23. }
24. funs.uploadFile();
25. }、
26. //ファイルを非同期でアップロードします
27. UploadFile: function() {
28. var fd = new FormData();//フォーム データ オブジェクトを作成
29. var files = (doms.fileToUpload)[0].files;
30. var count = files.length;
for
31. (var インデックス = 0; インデックス < カウント; インデックス ) {
var
32. ファイル = ファイル[インデックス]; fd.append(opts.file, file);//フォームデータにファイルを追加
33. funs.previewImage(file);//アップロードする前に画像をプレビューするか、他の方法でテキストをプレビューします
var
35. xhr =
new
36. XMLHttpRequest(); xhr.upload.addEventListener("進行状況", funs.uploadProgress, false
);
37. // アップロードの進行状況を監視します xhr.addEventListener("load", funs.uploadComplete, false
); >
38. xhr.addEventListener("error", opts.uploadFailed, false); >
xhr.open(
39. "POST", opts.url); xhr.send(fd) }、
40. //ファイルプレビュー
41. プレビューイメージ: 関数(ファイル) {
42. var ギャラリー = doms.thumb;
43. var img = document.createElement("img"); img.file = ファイル
44. doms.thumb.html(img);
//FileReader メソッドを使用して画像コンテンツを表示します
var
47. Reader = new FileReader(); Reader.onload = (function
(aImg) {
48. return
49. 関数(e) { aImg.src = e.target.result;
50. })(img);
Reader.readAsDataURL(ファイル)
}、
UploadProgress:
53. 関数
(evt) {
55. if (evt.lengthComputable) {
56. varpercentComplete = Math.round(evt.loaded * 100 / evt.total); doms.progress.html(percentComplete.toString()
'%'
57. ); }、
58. "uploadComplete":
関数
59. (evt) {
60. アラート(evt.target.responseText)
61. };
62. doms.fileToUpload.on("変更", function() {
63. doms.progress.find("スパン").width("0"); >
64. funs.fileSelected();
65. });
66. });
67. }
68. });
69. })(ゼプト) ;

呼び出し方法:

JavaScript コードコンテンツをクリップボードにコピーします

1. $(".カメラエリア").fileUpload({
2. "url": "savetofile.php",
3. "ファイル": "myFile"
4. });

PHP 部分:

PHP コードコンテンツをクリップボードにコピーします

2. if (isset($_FILES['myFile'])) {
3. // 例:
4. writeLog($_FILES); move_uploaded_file(
5. $_FILES['myFile']['tmp_name']、"uploads/" . $_FILES['myFile']['名前']); エコー
6. '成功しました'; }
7. function writeLog(
8. $log){ if(
9. is_array($log) | | is_object($log)){ $log = json_encode(
10. $log); } $log
11. = $log
12. ."rn"; file_put_contents
13. ('log.log'
14. , $log,FILE_APPEND); } ?>

15. 以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。

    原文: http://www.cnblogs.com/hutuzhu/p/5254532.html