가짜 ajax 업로드 파일

최근 가짜 ajax 비동기 로 파일 을 업로드 하 느 라 고생 하고 있 습 니 다.
인터넷 에서 검색 해 보 니 대부분의 방법의 input file 컨트롤 이 form 에 국한 되 어 있 습 니 다. form 밖 이 라면?
임시 form 과 임시 iframe 을 동적 으로 생 성 해 야 합 니 다. action 은 업로드 파일 URL 을 가리 키 고 target 은 임시 iframe 을 가리 키 며 form 에서 file 컨트롤 을 생 성 해 야 합 니 다.
그러나 안전 을 고려 하여 file 컨트롤 은 읽 기만 하고 value 값 을 동적 으로 설정 할 수 없 기 때문에 임시 form 에서 생 성 된 file 컨트롤 은 사용자 가 수 동 으로 조작 하지 않 는 한 해당 파일 을 연결 할 수 없습니다.
이때, 나 는 jquery 의 clone 방법 이 생각 났 다. 그래서 나 는 다음 과 같은 코드 를 썼 다.

var $cloneFile = $file.clone(true);
$cloneFile.removeAttr("id").appendTo($("#FILE_UPLOAD_TEMPFORM"));

테스트 결과 배경 에서 받 은 파일 이 영원히 비어 있 는 것 을 발견 하고 jquery 의 clone 방법 이 file 컨트롤 에 도 어 쩔 수 없다 는 것 을 알 게 되 었 습 니 다. 생각해 보 니 일리 가 있 는 지, 아니면 안전 에 기반 한 것 인지 알 게 되 었 습 니 다.
한 번 의 사 고 를 통 해 저 는 다음 과 같은 방법 을 생각 했 습 니 다. 역시 jquery 의 clone 을 바탕 으로 조정 을 했 습 니 다.

//  file  
var $cloneFile = $file.clone(true);
//    file       form 
//    file       file  
$file.hide().after($cloneFile).removeAttr("id").appendTo($("#FILE_UPLOAD_TEMPFORM"));

나 는 가장 원시 적 인 file 컨트롤 을 임시 form 으로 옮 겼 고 복 제 된 것 을 원래 의 위치 로 대체 했다.
테스트, OK, 해결!다음은 모든 JS 코드 입 니 다. sea. js 기반 입 니 다.

/**
 * @author weeksun23 
 * @date 2013-08-07 23:20
 * @description          ，             file            URL 
 * @param $file file   jquery  
 * @param uploadUrl   URL
 * @param type           (jpg|gif|bmp|jpeg)
 * @param callback       
 * @dependency jquery
 * @extra      3 HTML ID：FILE_UPLOAD_TEMPDV FILE_UPLOAD_TEMPFORM FILE_UPLOAD_TEMPFRAME
 */
define(function(require, exports, module) {
    function FileUpload($file,uploadUrl,type,callback){
        this.$file = $file;
        this.uploadUrl = uploadUrl;
        this.type = type || null;
        this.callback = $.extend({
            complete : function(response) {}, //       
            beforeUpload : function(fileName) {}, //     ，  false     
            afterUpload : function() {} //       
        },callback);
    }
    FileUpload.prototype.upload = function(){
        var $file = this.$file,
            filePath = $file.val(),
            type = this.type,
            fileFullName = filePath.substring(filePath.lastIndexOf("\\") + 1);
        if(!filePath) return false;
        if(type !== null){
            var ext = fileFullName.substring(fileFullName.lastIndexOf(".") + 1);
            if(type.indexOf(ext) === -1) return false;
        }
        var callback = this.callback;
        if(callback.beforeUpload.call(this,fileFullName) === false) return false;
        $("body").append(["<div id='FILE_UPLOAD_TEMPDV' style='display:none;'>",
                "<form id='FILE_UPLOAD_TEMPFORM' enctype='multipart/form-data' method='post' action='",
                    this.uploadUrl,"' target='FILE_UPLOAD_TEMPFRAME'>",
                "</form>",
            "<iframe id='FILE_UPLOAD_TEMPFRAME' name='FILE_UPLOAD_TEMPFRAME'></iframe>",
        "</div>"].join(""));
        $("#FILE_UPLOAD_TEMPFRAME").on("load",function(){
            var response = this.contentWindow.document.body.innerHTML;
            callback.complete(response);
            $(this).off("load");
            $("#FILE_UPLOAD_TEMPDV").remove();
        });
        //  file  
        var $cloneFile = $file.clone(true);
        //    file       form 
        //    file       file  
        $file.hide().after($cloneFile).removeAttr("id").appendTo($("#FILE_UPLOAD_TEMPFORM"));
        this.$file = $cloneFile;
        $("#FILE_UPLOAD_TEMPFORM").submit();
        callback.afterUpload.call(this);
        //         
        return true;
    };
    module.exports = FileUpload;
});