今朝H5をアップロードしているいくつかのコードの簡単な記録とまだ落とし穴があります
1。表示
フロントエンドのアップロードファイルをフォームフォームに渡す必要があり、AJAXを使用できないためです。このようにして、モバイルページにタイプファイルで入力を入力することは本当に良くありません。下の図に示すように、それは非常にイライラしますか？
ソリューションを見つけた後、一部のPCは、uploadifyなどのjQueryツールライブラリを使用して、この入力をフラッシュに置き換えましたが、ほとんどのモバイルブラウザーはフラッシュをサポートしていません。したがって、最終的な方法は、フォームフォームを使用して、フォームの透明度と入力を0に設定するだけで、コンテンツが表示されるようになり、表示されたコンテンツを必要に応じて作成できます。コードは次のとおりです。
<！doctype html> <html> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width、device-width、inviarty-scale = 1.0、no"> <title> </title> <style> div {width：100％;}マージン：0 auto;} .upload {position：relative; width：80px; height：18px; line-height：18px; background：＃2fc7c9; text-align：center;色：#fff;パディング：0px 5px; -webkit-border-radius：2px; border-radius：2px;マージン：0 Auto; } .upload form {width：100％; position：absolute;左：0;上：0;不透明：0;フィルター：アルファ（不透明= 0）;} .upload form input {width：100％;} </style> </head> <body> <div> <img src = "img/1.jpg"/> </div> <p>アップロード画像</p> <フォーム> <入力= "ファイル外観は写真に示されているとおりであるため、Pタグ「アップロード画像」に表示されます。クリックすると、ファイルを選択する効果が得られます
2。JSコード
H5アップロードの基本的な関数を使用して、非常に簡単に書きました
HTMLコードは次のとおりです。アクションは要求するパスです。私がここでやっていることは、ファイルが変更されたときにアバターをアップロードして変更することです。入力タグの名前属性は省略できず、バックエンドインターフェイスに関連しています。
<form id = "uploadform" enctype = "multipart/form-data" method = "post" action = "xxxxxx"> <input type = "file" name "name" name = "imagefile" id = "imagefile" onchange = "filesed（）"/> </form>
var imaxfilesize = 2097152; //2mwindow.fileselected = function（）{var ofile = document.getElementById（ 'imageFile'）。ファイル[0]; //ファイルを読むvar rfilter =/^（image // bmp | image // gif | image // jpeg | image // png | image // tiff）$/i; if（！rfilter.test（ofile.type）））{alert（ "ファイル形式は画像である必要があります"）;戻る; } if（ofile.size> imaxfilesize）{alert（ "画像サイズは2mを超えることはできません"）;戻る; } var vfd = new formData（document.getElementById（ 'uploadform'））、// request and data oxhr = new xmlhttprequest（）; oxhr.addeventlistener（ 'load'、function（resupload）{// success}、false）; oxhr.addeventlistener（ 'error'、function（）{// faild}、false）; oxhr.addeventlistener（ 'abort'、function（）{//アップロード割り込み}、false）; oxhr.open（ 'post'、actionurl）; oxhr.send（vfd）;};詳細は成功または失敗を決定するので、すべてを真剣に受け止めなければなりません。
上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。