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.
Xem demo tại sancongnghe.vn
Cái bạn cần đàu tiên là pluginjquery.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 ở đây1) Code HTMLĐầu tiên ta cần gọi plugin lên để sử dụng
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ạngjson_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.
Bạn đang xem: Submit form using jquery ajax and php without page refresh
Cái bạn cần đàu tiên là pluginjquery.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 ở đây1) Code HTMLĐầu tiên ta cần gọi plugin lên để sử dụng
Tiếp theo làthẻ img để hiển thị ảnh sau khi upload xong.
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ạngjson_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.
