아래 스크립트를 사용하여 정상적으로 작동하는 이미지를 업로드했습니다.

HTML

<input id="file" type="file" name="file"/>
<div id="response"></div>

자바 스크립트

jQuery('document').ready(function(){
    var input = document.getElementById("file");
    var formdata = false;
    if (window.FormData) {
        formdata = new FormData();
    }
    input.addEventListener("change", function (evt) {
        var i = 0, len = this.files.length, img, reader, file;

        for ( ; i < len; i++ ) {
            file = this.files[i];

            if (!!file.type.match(/image.*/)) {
                if ( window.FileReader ) {
                    reader = new FileReader();
                    reader.onloadend = function (e) {
                        //showUploadedItem(e.target.result, file.fileName);
                    };
                    reader.readAsDataURL(file);
                }

                if (formdata) {
                    formdata.append("image", file);
                    formdata.append("extra",'extra-data');
                }

                if (formdata) {
                    jQuery('div#response').html('<br /><img src="ajax-loader.gif"/>');

                    jQuery.ajax({
                        url: "upload.php",
                        type: "POST",
                        data: formdata,
                        processData: false,
                        contentType: false,
                        success: function (res) {
                         jQuery('div#response').html("Successfully uploaded");
                        }
                    });
                }
            }
            else
            {
                alert('Not a vaild image!');
            }
        }

    }, false);
});

설명

응답 div을 사용 하여 업로드 애니메이션 및 업로드 완료 후 응답 을 표시합니다.

이 스크립트를 사용할 때 ID와 같은 추가 데이터를 파일과 함께 보낼 수 있습니다. extra-data스크립트에서와 같이 언급했습니다 .

PHP 수준에서는 정상적인 파일 업로드로 작동합니다. 추가 데이터는 데이터로 검색 할 수 있습니다 $_POST.

여기서는 플러그인과 물건을 사용하지 않습니다. 원하는대로 코드를 변경할 수 있습니다. 당신은 여기서 맹목적으로 코딩하지 않습니다. 이것은 모든 jQuery 파일 업로드의 핵심 기능입니다. 실제로 자바 스크립트.