Với một FORM đơn giản để đăng dữ liệu dạng text bằng Ajax thì có nhiều cách, tuy nhiên nếu muốn upload luôn cả file vào thì nhiều bạn gặp khó khăn. Bài viết này sẽ hướng dẫn sử dụng jquery.form.js để đăng 1 file sử dụng Ajax.
 

Cái bạn cần đàu tiên là plugin jquery.form.js, bạn có thể download ở đây. Mình sẽ hướng dẫn các bạn sử dụng để post 1 ảnh sang php xử lý.

Demo bạn có thể đăng nhập và xem ở đây

1) Code HTML

Đầu tiên ta cần gọi plugin lên để sử dụng

<script src="http://malsup.github.com/jquery.form.js"></script> 

Tiếp theo là thẻ img để hiển thị ảnh sau khi upload xong.

<img id="logoimages" class="img-responsive" src="{LOGO}" alt=""/>

Tiếp theo là 1 nút để chọn ảnh.

<a onclick="themlogo();" class="btn btn-primary" id="buttonUploadLogo">Chọn Ảnh<span class="glyphicon glyphicon-upload"></span></a>

Ở đây đã gắn sẳn even themlogo().

Tiếp theo là 1 form ẩn dùng để gọi lên khi load sự kiện themlogo():

<form id="logoUploadForm" class="form-inline logoUploadForm" action="index.php" method="post" enctype="multipart/form-data" style="display: none;">
    <input name="images" type="file" id="logoUploadInput"/>
</form>

Trong form này bạn chú ý:
- style="display: none;".
- enctype="multipart/form-data".
- 2 ID logoUploadForm và logoUploadInput. chúng ta sẽ sử dụng các ID này trong JS.

2) Code JS

$(document).ready(function(){
    themlogo = function(){
        $("#logoUploadInput").click();
    }
    $("#logoUploadInput").change(function(){
        $('#logoUploadForm').submit();
    });
    $('#logoUploadForm').ajaxForm({
        beforeSend: function() {
        },
        complete: function(xhr) {
            var data = JSON.parse(xhr.responseText);
            if(data.error == 0){
                $("#logoimages").attr("src", data.linkfile);
            }else if(data.error == 1){
                alert( data.message );
            }
        }
    });
});

Giải thích sơ qua đoạn code này:
- Khi even themlogo được gọi, #logoUploadInput trong forrm sẽ được click và mở cửa sổ chọn file.
- Sau khi chọn file xong, tức là #logoUploadInput đã change thì form #logoUploadForm sẽ được submit.
- Lúc này ajaxForm sẽ khởi chạy cho #logoUploadForm. và post toàn bộ nội dung trong form đến php bằng đường dẫn tại action="".
- Sau khi php upload xong, trả về kết quả dạng json_encode nên cần parse nó ra để sử dụng và đưa vào #logoimages. (data.linkfile là đường dẫn tuyệt đối đến file vừa upload)

3) PHP xử lý nội dung file gửi lên.
Việc php xử lý nội dung file gửi lên thì đơn giản rồi. Mình xin phép đăng 1 đoạn mẫu đơn giản để các bạn tìm hiểu:

if( $nv_Request->get_int( 'namelogo', 'post', '' ) AND ! empty( $_FILES['images']['tmp_name'] ) )
{
	$contents_type['file_allowed_ext'] = array();
	$contents_type['file_allowed_ext'][] = "images";
    require_once ( NV_ROOTDIR . "/vendor/autoload.php" );
    nv_mkdir( NV_UPLOADS_REAL_DIR . '/' . $module_name, $user_active, true );
    $upload = new NukeViet\Files\Upload( $contents_type['file_allowed_ext'], $global_config['forbid_extensions'], $global_config['forbid_mimes'], NV_UPLOAD_MAX_FILESIZE, NV_MAX_WIDTH, NV_MAX_HEIGHT );
	$upload_info = $upload->save_file( $_FILES['images'], NV_ROOTDIR . '/' . NV_UPLOADS_DIR . '/' . $module_name . '/' . $user_active, false );
    @unlink( $_FILES['images']['tmp_name'] );
    if( $upload_info['size'] > ( $pro_config['dungluonglogo'] * 1024 ) )
    {
        $data = array(
            'error' => 1, //bi loi
            'message' => $lang_module['loidungluonganh'] . " " . $pro_config['dungluonglogo'] ." Kb",
        );
        //xoa file upload tam
        if ( ! empty( $upload_info['basename'] ) and is_file( NV_ROOTDIR . '/' . NV_UPLOADS_DIR . '/' . $module_name . '/' . $user_active . '/' . $upload_info['basename'] ) )
        {
            @nv_deletefile(NV_ROOTDIR . '/' . NV_UPLOADS_DIR . '/' . $module_name . '/' . $user_active . '/' . $upload_info['basename'] );
        }
        die( json_encode( $data ) );
    }
    if( $upload_info['img_info'][0] > 1500 || $upload_info['img_info'][1] > 1500 )
    {
        $data = array(
            'error' => 1, //bi loi
            'message' => $lang_module['loikichthuocanh'],
        );
        //xoa file upload tam
        if ( ! empty( $upload_info['basename'] ) and is_file( NV_ROOTDIR . '/' . NV_UPLOADS_DIR . '/' . $module_name . '/' . $user_active . '/' . $upload_info['basename'] ) )
        {
            @nv_deletefile(NV_ROOTDIR . '/' . NV_UPLOADS_DIR . '/' . $module_name . '/' . $user_active . '/' . $upload_info['basename'] );
        }
        die( json_encode( $data ) );
    }
    if ( empty( $upload_info['error'] ) )
    {
        @chmod( $upload_info['name'], 0644 );
        $image = $upload_info['name'];
		$basename = $upload_info['basename'];
		$_image = new NukeViet\Files\Image( $image, $pro_config['dailogo'], $pro_config['ronglogo'] );
		$_image->resizeXY( $pro_config['dailogo'], $pro_config['ronglogo'] );
		$_image->save( NV_UPLOADS_REAL_DIR . '/' . $module_name . '/' . $user_active, $basename );

        $data = array(
            'error' => 0, 
            'linkfile' => NV_BASE_SITEURL . NV_UPLOADS_DIR . "/" . $module_name . '/' . $user_active . '/' . $basename,
            'filename' => $basename,
        );
        die( json_encode( $data ) );
    }
    else
    {
        $data = array(
            'error' => 1, //bi loi
            'message' => $lang_module['loianh'],
        );
        die( json_encode( $data ) );
    }
}

Ở đây mình đang dùng code nukeviet để nhận file, Với code thuần thì cũng tương tự.

Vấn đề quan trọng nhất là kết quả trả về dạng json_encode để JS tiếp tục xử lý.

Chúc các bạn thành công. Mọi thắc mắc vui lòng post vào commen bên dưới.