アップロードファイルのリフレッシュなし(ie 8+をサポート)

2057 ワード

考え方:
formフォームを使用してファイルをコミットし、コミットに成功したらiframeにジャンプし、このiframeを隠し、戻ってきた情報をiframeにレンダリングし、iframeの内容を取得します.(ここでブラウザはX-Frame-Optionsに関する問題を報告します.解決方法:https://stackoverflow.com/questions/28647136/how-to-disable-x-frame-options-response-header-in-spring-security)
ie 9+と互換性がある場合はformDataを使用し、ajaxを使用して非同期でアップロードすればよい.
次はie 8と互換性のある方法です.
html

 
     
         
                
                
            
            
    </div>
</div>
</code></pre>  <br>css <pre><code> .upload-file .uf-button form {
            position: relative;
}

.upload-file .uf-button form input {
    position: absolute;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    height: 100%;
     width: 100%;
}
</code></pre>  <br>ここではinputを   に いて   を0にすることに に  してください.そうでない  、ie 8のセキュリティメカニズムにより、input[type="file"]のクリックイベントが の  でトリガーされると、   にinput[type="file"]のファイルが  されず、フォームにアップロードされたファイルが になります.<br>js <pre><code>$('#uf-input-upload').on('change', function (e) {
    if (e.target.value.length&gt;0) {
        $('#uf-form').submit();
        console.log("    ");
    }
});
//  frame load           
$('#uf-frame').on('load', function () {
    var response = $("#uf-frame").contents().find("body").html();
    console.log(response);
    if (response.length &gt; 0) {
        try {
            response = JSON.parse(response);
           console.log("     :"+response );
    } else {
        message.add("      ", "error");
    }

});
</code></pre>  <br>ここでは, される  はiframeで け れられるためtextを し,json  のデータを   さずに  する.

vue.jsのv-forサイクル

Virtualbox ubuntu仮想マシンネットワークカードの紛失解決方法