以前に画像のアップロードについて書きましたが、最近、複数のアップロードが必要なビジネス要件があったので、書き直しました。
HTML 構造:
XML/HTML コードコンテンツをクリップボードにコピー
- <div クラス="コンテナ" >
- <ラベル>画像ファイルを選択してください: ラベル>
- <入力 type="file" id="file_input" 複数/>
- div>
ところで、このアップロードの主なロジックについて話しましょう:
・input タグを使用して、type=file を選択してください。複数の画像を選択することを忘れないでください。そうしないと、単一の画像しか選択できません。
・入力の変更時刻をバインドします、
・重要な点は、この変更イベントをどのように処理するかです。H5 の新しい FileReader インターフェースを使用してファイルを読み取り、base64 にエンコードします。次に、バックエンドのクラスメートと対話します。
JS コード:
JavaScript コードコンテンツをクリップボードにコピーします
-
window.onload = function(){
-
var input = document.getElementById("file_input");
-
var result,div;
-
-
if(typeof FileReader==='undefined'){
-
result.innerHTML = "抱歉,你的浏览器不支持 FileReader";
-
input.setAttribute('disabled','disabled');
-
}else{
-
input.addEventListener('change',readFile,false);
-
}
-
function readFile(){
-
for(var i=0;i<this.files.length;i++){
-
if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)){
-
return alert("上传的图片格式不正确,请重新选择")
}
-
var reader = new FileReader();
-
reader.readAsDataURL(this.files[i]);
-
reader.onload = function(e){
-
result = '
this
.result+'" alt=""/> ' ;
-
div = document.createElement('div');
div.innerHTML = 結果;
- document.getElementById(
'body'-
).appendChild(div) // dom ツリーを挿入
}
-
}
-
複数の写真をアップロードする方法は 0.0 ですか?-
ただし、これは画像を Base64 エンコードに変換してフロントエンドに表示するだけです。
画像を挿入した後、開発者ツールを開き、HTML 構造が次のようになっていることを確認します
現実的なアプローチは、処理関数でファイル キュー内のファイルをバックエンドに送信し、バックエンド スチューデントが MD5 暗号化ファイルとそのファイルに対応するパスをフロント エンドに返し、フロント エンドがこのパスを使用することです。そしてそれを上位のページにレンダリングします。
その後、MD5 ファイルはバックエンドに返送されます。通常、フロントエンドはアップロード後に写真を削除するため、返送の目的は、それらの写真が必要なものであることをバックエンドに確認するように指示することであり、バックエンドは保存します。それらをデータベースに保存します。
jquery の操作方法を教えてください
JavaScript コード
コンテンツをクリップボードにコピーします
-
関数 readFile(){
-
var fd = new FormData();
-
for(var i=0;i<this.files.length;i ){
-
var reader = new FileReader();
-
reader.readAsDataURL(this.files[i]);
-
fd.append(i,this.files[i]);
}
-
$.ajax({
-
url : ''、
-
type : '投稿'、
-
データ : fd,
-
成功 : 関数(データ){
-
console.log(データ)
-
}
-
})
-
}
FormData も H5 の新しいインターフェイスであり、表個別のコントロールのハンド渡しを模倣するために使用され、最大の優れた点は、二重化されたファイルをハンドリングできることです
その後成功した回调里面我们拿念要的データを回った後、写真を移動して页面啦、同様の以前の行為を行うことができます~
上个效果图:
以上が本書のすべての内容であり、広く学術的に役立つことが期待されます。
翻訳:
http://www.cnblogs.com/weapon-x/p/5237064.html