アップロード画像、マルチマップアップロード、プレビュー機能、js原生無依存

4694 ワード
最近、フロントエンドのファイルアップロード機能が気になります.会社が画像プレビューをサポートする画像アップロードプラグインを作るように要求したので、自分で多くの関連プラグインを検索しました.機能は多いですが、会社の考えに基づいて修正できないところもあります.jQueryやBootstrapライブラリに依存する必要があります.だから、画像アップロードの原理を学び、原生無依存にしてみたいと思っています.また、プラグインをアップロードするのに十分な柔軟性があります.余計なことを言わないで,きちんとしている.
1.大体の考え方
1.1まず、ユーザーがプラグインをどのように使用するかを考慮する必要があります.
ユーザがプラグインコードを導入すると、以下のようにパラメータを設定し、方法を実行するだけで画像アップロードコンポーネントを生成します.
  //              div

//     
var options = {
    path: '/',    //             ，  form   action  
    onSuccess: function (res) {    //           ，res    ajax    
        console.log(res);  
    },
    onFailure: function (res) {    //           ，res    ajax    
        console.log(res);
    }
}
//              ,                   div   ，             ，             ，           ，                ，                。
var upload = tinyImgUpload('#upload', options);

1.2コード設計
ユーザーがプラグインコードをどのように導入するかを考える必要があります.プラグインコードは2つのファイルに分けるべきで、1つのCSSファイル(tinyImgUpload.css)はコンポーネントの基本スタイルを定義するために使用され、またユーザーは自分の考えに基づいて自分でDIYスタイルを作ることができ、もう1つは機能ロジックを制御するjsファイル(tinyImgUpload.js)である.ユーザーがこの2つのファイルを導入すると、画像アップロードコンポーネントを実現できます.
2.具体的な実現
具体的には、主に2つの場所に関連し、1つはローカルファイルを読み取り、画像のアップロード前にプレビューできる機能を実現し、1つは画像のアップロード機能である.
2.1ローカルファイルの読み込みプレビュー
ここではhtml 5のFile APIを使用しています.このAPIを使用すると、クライアントでアップロードされたファイルのタイプを検証し、ファイルのサイズを制限することができます.もちろん、ここでは主にFileReaderインタフェースを使用してファイルを読み取ることができます.Fileeader.readAsData URL()が返すイベントオブジェクトのresult属性は、ファイルをbase 64に符号化するデータアドレスであり、以下のようにsrc属性に付与すると、ピクチャが表示されます.具体的なコードは以下の通りで、完全なコードはここからダウンロードできます(tinyImgUpload.js)
//     
//  input     
function handleFileSelect(evt) {
    var files = evt.target.files;

    for(var i=0, f; f=files[i];i++){
        //           
        if(!f.type.match('image.*')){
            continue;
        }
        //           
        var tip = false;
        for(var j=0; j'+
                                    'x'

                    ele.insertBefore(oDiv, addBtn);
                };
            })(f);

            reader.readAsDataURL(f);
        }
    }
}
// input#img-file-input           input  ，           change  
document.querySelector('#img-file-input').addEventListener('change', handleFileSelect, false);

2.2画像のアップロード
2.2.1ファイルオブジェクトの準備
ファイルをアップロードする前に、ユーザーが選択したファイルオブジェクトをどのように保存するかを考慮する必要があります.ユーザーが何度も選択したり、アップロードする前にいくつかの画像を削除したりする可能性があります.そのため、画像情報をリアルタイムで保存し、プレビューした画像と同期して、どの画像が表示されているかをプレビューする必要があります.この場所にはいくつかの画像が保存されます.私が採用している方法は、ファイル情報を配列に組み立て、コンポーネント要素(#img-container)のカスタム属性にバインドすることです.上のコードの「ele.files.push(f)」がこのことをしています.
2.2.2ファイルオブジェクトの準備ができたら、次はアップロードします.
ajaxはファイルオブジェクトを直接アップロードすることはできません.FormDataオブジェクトを使用することができます.FormDataはXMLHttpRequest Level 2に追加された新しいインタフェースで、一連のキー値ペアを使用して完全なフォームをシミュレートし、XMLHttpRequestを使用してこの「フォーム」を非同期で送信します.具体的なコードは以下の通りです.
//     
function uploadImg() {
    var xhr = new XMLHttpRequest();
    var formData = new FormData();

    for(var i=0, f; f=ele.files[i]; i++){
        formData.append('files', f);
    }

    xhr.onreadystatechange = function (e) {
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                options.onSuccess(xhr.responseText);
            }else {
                options.onFailure(xhr.responseText);
            }
        }
    }

    xhr.open('POST', options.path, true);
    xhr.send(formData);
}

2.3スタイルの設定
デフォルトスタイルとして基本的なレイアウトスタイルを書き、ユーザーは自分のニーズに合わせてDIYを行うことができます.ここでは完全なスタイルファイル(tinyImgUpload.css)です.基本的な効果図は以下の通りです.アップロード画像をトリガーしたい場合は、tinyImgUpload('#upload',options)が返すuploadメソッドをボタンにバインドし、クリックイベントを傍受することができます.


document.getElementsByClassName('submit')[0].onclick = function (e) {
    upload();
}

これで私が画像をクリックすると、画像がアップロードされ、サーバー側に処理されます.アップロードボタンサーバが受信した画像
画像のアップロードが使いにくいかどうかをテストするために、私は自分で画像受信のサーバーを構築して、nodeを使っています.jsは、multerによって実現され、興味があればここをクリックすることができます.
3まとめ
画像アップロードの重要な部分は、ローカルファイルを読み込んでプレビューを実現する方法と、FormDataオブジェクトを構築してajax非同期アップロードファイルを実現する方法です.現在、このプラグインの機能はまだ十分ではありません.私はそれをGithubに置きました.https://github.com/gitwd/tinyImgUpload)、その後は徐々に最適化され、貴重な意見を歓迎します.
4参照ディレクトリ
https://www.html5rocks.com/en/tutorials/file/dndfiles/http://codecloud.net/9276.html http://www.zhangxinxu.com/wordpress/2011/09/%E5%9F%BA%E4%BA%8Ehtml5%E7%9A%84%E5%8F%AF%E9%A2%84%E8%A7%88%E5%A4%9A%E5%9B%BE%E7%89%87ajax%E4%B8%8A%E4%BC%A0/https://cnodejs.org/topic/50ce2bbb637ffa415589a50f
JAvascriptの深いコピーを実現する方法
jqueryを使用して簡単なドラッグ効果を実現し、ソースコードを共有します.