タイトルは例であるため、この例をつなぎ合わせたので、今回は説明しません。私は約5つまたは6つのドラッグアンドドロッププラグインとデモを参照してから、最高のプラグインを選び、最終的にそのような例になりました。見てみましょう（アドレスが長時間効果的であることを保証することはできません。失敗した場合は、記事の最後にあるデモをクリックしてダウンロードしてください）：
私は外国のフォトアルバムのウェブサイトを参照しています。変更はそれほど多くはありませんが、鳥の歌のスタイルは中国語に変換され、アップロードスタイルも変更されています。これを選択する理由は、私が拡大するのが簡単だからです。画像を追加する3つの方法、1つはドラッグアンドドロップをアップロードするための3つの方法、1つは通常のファイルをアップロードし、もう1つはネットワーク画像を追加することです。 3つのアップロードモードを巧みに統合し、IEブラウザで閲覧できます。 HTML5がサポートされていない場合、写真に示すように、写真をアップロードするプロンプトはありません。
ドラッグアンドドロップアップロードの最も重要なことは、関数の70％を実装するJSパートコードであり、他の30％は画像情報を背景に送信し、圧縮、トリミングなどの対応する処理を行います。
$（）。ready（function（）{
if（$。browser.safari|| $ .browser.mozilla）{
$（ '＃dtb-msg1 .compatible'）。show（）;
$（ '＃dtb-msg1 .notcompatible'）。hide（）;
$（ '＃drop_zone_home'）。hover（function（）{
$（this）.children（ 'p'）。stop（）。animate（{top： '0px'}、200）;
}、関数（）{
$（this）.children（ 'p'）。stop（）。animate（{top： '-44px'}、200）;
}）;
//機能の実装
$（document）.on（{
dragleave：function（e）{
E.PreventDefault（）;
$（'。dashboard_target_box '）。removeclass（' over '）;
}、
ドロップ：function（e）{
E.PreventDefault（）;
//$('.dashboard_target_box').RemoveClass('over '）;
}、
Dragenter：function（e）{
E.PreventDefault（）;
$（'。dashboard_target_box '）。addclass（' over '）;
}、
ドラッグオーバー：function（e）{
E.PreventDefault（）;
$（'。dashboard_target_box '）。addclass（' over '）;
}
}）;
var box = document.getElementById（ 'ターゲット_box'）;
box.addeventlistener（ "drop"、function（e）{
E.PreventDefault（）;
//ファイルリストを取得します
var filelist = e.datatransfer.files;
var img = document.createelement（ 'img'）;
//ファイルをページにドラッグしているかどうかを検出します
if（filelist.length == 0）{
$（'。dashboard_target_box '）。removeclass（' over '）;
戻る;
}
//ファイルが画像であるかどうかを検出します
if（fileList [0] .type.indexof（ 'image'）=== -1）{
$（'。dashboard_target_box '）。removeclass（' over '）;
戻る;
}
if（$。browser.safari）{
// chrome8+
img.src = window.webkiturl.createobjecturl（filelist [0]）;
} else if（$。browser.mozilla）{
// ff4+
img.src = window.url.createobjecturl（filelist [0]）;
}それ以外{
//ファイルリーダーオブジェクトをインスタンス化します
var reader = new fileReader（）;
reader.onload = function（e）{
img.src = this.result;
$（document.body）.appendchild（img）;
}
reader.readasdataurl（filelist [0]）;
}
var xhr = new xmlhttprequest（）;
xhr.open（ "post"、 "test.php"、true）;
xhr.setRequestheader（ "x-requested-with"、 "xmlhttprequest"）;
xhr.upload.addeventlistener（ "progress"、function（e）{
$（ "＃dtb-msg3"）。hide（）;
$（ "＃dtb-msg4 span"）。show（）;
$（ "＃dtb-msg4"）。子供（ 'span'）。eq（1）.css（{width： '0px'}）;
$（ '。show'）。html（ ''）;
if（e.lengthComputable）{
var loaded = math.ceil（（e.loaded / e.total） * 100）;
$（ "＃dtb-msg4"）。子供（ 'span'）
}
}、 間違い）;
xhr.addeventlistener（ "load"、function（e）{
$（'。dashboard_target_box '）。removeclass（' over '）;
$（ "＃dtb-msg3"）。show（）;
$（ "＃dtb-msg4 span"）。hide（）;
var result = jquery.parsejson（e.target.responsetext）;
アラート（result.filename）;
$（ '。show'）。append（result.img）;
}、 間違い）;
var fd = new formdata（）;
fd.append（ 'xfile'、filelist [0]）;
xhr.send（fd）;
}、間違い）;
}それ以外{
$（ '＃dtb-msg1 .compatible'）。hide（）;
$（ '＃dtb-msg1 .notcompatible'）。show（）;
}
}）;
最初は、最初にブラウザタイプを審査しました。なぜなら、紹介したばかりのブラウザが異なるインターフェイスを見るからです。コードの主な実装は、関数実装から始まります。なぜこれがどのように機能し、原則が何であるかについてはあまり言いません。この記事を参照してください。「Renren Home Page（HTML5 Drag＆Drop、Filereader API、FormData）のドラッグアンドドロップアップロードの詳細な説明」。ただし、Renrenが少し面倒であるように見えるため、Ajaxアップロードパーツのコードはまだ少し異なります。そのため、別の方法を見つけます。
最後に、PHPコードの一部をアップロードしています。ここでは、参照を提供するだけです。プロジェクトのニーズに応じて自分で書くことができます。
$ r = new stdclass（）;
ヘッダー（ 'Content-Type：Application/JSON'）;
$ maxsize = 10; // MB
if（$ _ files ['xfile'] ['size']>（$ maxsize * 1048576））{
$ r-> error = "画像サイズは$ maxsize mbを超えません";
}
$ folder = 'files/';
if（！is_dir（$ folder））{
mkdir（$ folder）;
}
$ folder。= $ _post ['folder']？ $ _POST ['フォルダー']。 '/'： '';
if（！is_dir（$ folder））{
mkdir（$ folder）;
}
if（preg_match（ '/image/i'、$ _files ['xfile'] ['type']））{
$ filename = $ _post ['value']？ $ _POST ['値']：$フォルダー。 sha1（@microtime（）。 ' - '。$ _files ['xfile'] ['name']）。 '.jpg';
}それ以外{
$ tld = split（ '、'、$ _files ['xfile'] ['name']）;
$ tld = $ tld [count（$ tld）-1];
$ filename = $ _post ['value']？ $ _POST ['値']：$フォルダー。 sha1（@microtime（）。 ' - '。$ _files ['xfile'] ['name']）。 $ tld;
}
$ types = array（ 'image/png'、 'image/gif'、 'image/jpeg'）;
if（in_array（$ _ files ['xfile'] ['type']、$型））{
$ source = file_get_contents（$ _ files ["xfile"] ["tmp_name"]）;
imageresize（$ source、$ filename、$ _post ['width']、$ _post ['height']、$ _post ['crop']、$ _post ['quality']）;
}それ以外{
move_uploaded_file（$ _ files ["xfile"] ["tmp_name"]、$ filename）;
}
$ path = str_replace（ 'test.php'、 ''、$ _server ['script_name']）;
$ r-> filename = $ filename;
$ r-> path = $ path;
$ r-> img = '<img src = "'。$ path。$ filename。 '" />';
echo json_encode（$ r）;
function imageresize（$ source、$ destination、$ width = 0、$ height = 0、$ crop = false、$ quality = 80）{
$ quality = $ quality？ $ quality：80;
$ image = imagecreatefromstring（$ source）;
if（$ image）{
//寸法を取得します
$ w = imagesx（$ image）;
$ h = imagesy（$ mage）;
if（（$ width && $ w> $ width）||（$ height && $ h> $ height））{
$比= $ w / $ h;
if（（$ ratio> = 1 || $ height == 0）&& $ width &&！$ crop）{
$ new_height = $ width / $ ratio;
$ new_width = $ width;
} elseif（$ crop && $ ratio <=（$ width / $ height））{
$ new_height = $ width / $ ratio;
$ new_width = $ width;
} それ以外 {
$ new_width = $ height * $ ratio;
$ new_height = $ height;
}
} それ以外 {
$ new_width = $ w;
$ new_height = $ h;
}
$ x_mid = $ new_width *.5; // Horizontal Middle
$ y_mid = $ new_height *.5; //垂直中央
// Resample
error_log（ 'height：'。$ new_height。 ' - width：'。$ new_width）;
$ new = ImageCreatetrueColor（round（$ new_width）、round（$ new_height））;
ImageCopyResampled（$ new、$ image、0、0、0、$ new_width、$ new_height、$ w、$ h）;
// 作物
if（$ crop）{
$ CROP = ImageCreatetrueColor（$ width？$ width：$ new_width、$ height？$ height：$ new_height）;
ImageCopyResampled（$ CROP、$ new、0、0、（$ x_mid-（$ width * .5））、0、$ width、$ height、$ width、$ height）;
//（$ y_mid-（$ height *.5））
}
//出力
// [進歩的なJPEGのため]インタランスを有効にする
ImageInterlace（$ crop？$ crop：$ new、true）;
$ dext = strtolower（pathinfo（$ destination、pathinfo_extension））;
if（$ dext == ''）{
$ dext = $ ext;
$ destination。= '。' 。 $ ext;
}
switch（$ dext）{
ケース 'jpeg'：
ケース「JPG」：
ImageJpeg（$ crop？$ crop：$ new、$ destination、$ quality）;
壊す;
ケース「PNG」：
$ pngquality =（$ quality -100） / 11.111111;
$ pngquality = round（abs（$ pngquality））;
ImagePng（$ crop？$ crop：$ new、$ destination、$ pngquality）;
壊す;
ケース「GIF」：
ImageGif（$ crop？$ crop：$ new、$ destination）;
壊す;
}
@imagedestroy（$ image）;
@imagedestroy（$ new）;
@imagedestroy（$ crop）;
}
}
PHPは最終的にJSON形式の配列を返します。私が返す情報は、IMGの画像アドレス、名前、およびHTMLコードです。最後に、JSONアレイはJSで取得され、処理されます。この時点で、操作は終了しました。
記事の冒頭では、クリックしてファイルのアップロードとネットワークの写真を選択していることも述べました。これらの2つはこのトピックの範囲内ではないため、それらについては説明しません。また、これらの2つの機能は、実装するのに厄介ではありません。
デモのダウンロード