実装ロジック
まず、あなたが知っているすべての、AJAXフォーム正しく行動から、隠されたiframeのリフレッシュの内側に移動して、フォームの塗りを彼らはまだ同期を使用していますが、リフレッシュされ、我々は元のページの更新はしないで、ファイルのそれのための要求にポストを送信することはできません。ファイルのアップロード処理を扱います。非表示のiframeを埋めるために重要なターゲットとの緊密な。このフォームを送信すると、ファイルがアップロードされ、ページが非表示のiframeように更新されるので、ユーザーは、治療効果とAjaxの効果は同じである見ることができます。
DOM構造
ここでは、ユーザーには見えない2つの警告、最初のIFRAMEが隠されているが、そこにあります。第二に、ターゲットプロパティの形式は、IFRAMEのid属性は、あなたがそうすることはできません、サーバーのリターンアドレスを取得し、その一貫性のあるこの場所を確保する必要があります
<form action="#" method="post" enctype="multipart/form-data" target="hidden_frame" id='upload'>
<input type="file" name="pic" accept="image/gif;image/jpg;" />
</form>
<iframe style="display:none" name='hidden_frame' id="hidden_frame" style='display:none'></iframe>画像のプレビュー
一般的に写真をアップロードする前に、我々は、ユーザーがアップロードした後に見てプレビューすることができますしたい、2つの方法があります。画像がアップロードされたので、成功した後、サーバーが原因時差の真ん中に、ピクチャー、ピクチャーショーのアドレスを返している小さな、錯覚が本当にプレビューのようであることをユーザーに与えます。第二の方法は、ローカルアドレスに入力を得るために、アップロード画像前の画像であり、その後、表示、それは地元のショーの映像ですので、これは時間差、実際のプレビューはありません。ロジック・コードとして単純な論理
$("#userHeadImg").change(function(event) {
var file = $(event.target)[0].files[0];
var src = URL.createObjectURL(file);
if(file){
//表示获取到了图片
}else{
//表示点击了取消
}
//这里的src就是图片的地址，将它放在任意一个img标签的src属性里面
});スタートアップロード
イベントのonchangeトリガーの形で内部のイベントを提出し、アップロードの写真
$("#upload").submit();サーバは、画像のURLを返します
サーバのアドレスがIFRAMEに返され、IFRAMEが更新されます。iframeのonloadイベントが、それは、サーバーが情報を返すことを意味し、そこに発生した場合、JSは、聞くのonload使用
var imgsrc=$(this).contents().find("pre").text();アップロードファイルの種類の制限を増やします
accept="image/gif;image/jpg;"
考えます
それはどのように最適化するために、複数のであれば、単一の画像に対してこのように、何の問題をアップロードしませんか？
この記事はで再現されています猿2048 JavaScriptが疑似非同期アップロードの写真を達成します