Upload ảnh với Ajax ngoài Front-end WordPress
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 | /**************************************************************** Project: MySavingWallet Resource: http://www.ibenic.com/wordpress-file-upload-with-ajax/ HTML FORM *****************************************************************/ <dt><?php esc_html_e( 'Support Doc', 'listify_child' ); ?></dt> <dd> <section> <label for="async-upload" class="input"> <i class="icon_append fa fa-life-ring"></i> <input type="file" id="bank_docs"> <input type="hidden" name="image_id" class="image_id"> <p>Please upload a proof of bank account ownership, <br> acceptable forms of verification are voided check, <br> bank letter, or bank statement.</p> </label> </section> </dd> <dd> <section> <ul id="preview_doc"> </ul> </section> </dd> /**************************************************************** JavaScript / AJAX *****************************************************************/ SavingWallet = {}; SavingWallet.prototype.prepareUpload = function (e) { e.preventDefault(); var file = e.target.files; var data = new FormData(); var nonce = $("#_wpnonce").val(); data.append('action', 'upload_bank_doc'); //data.append('nonce', local.nonce); $.each(file, function(k, v) { data.append('upload_bank_doc', v); }); $.ajax({ url: local.ajax_url, type: 'POST', data: data, cache: false, dataType: 'json', processData: false, contentType: false, success: function(data, textStatus, jqXHR) { console.log(data); if( data.response == "SUCCESS" ){ var preview = ""; if( data.type === "image/jpg" || data.type === "image/png" || data.type === "image/gif" || data.type === "image/jpeg" ) { preview = "<li data-attachment-id='" + data.id + "'><img src='" + data.url + "' /><span class=\"delete_doc\" data-fileurl='" + data.url + "'>x</span></li>"; } else { preview = "<li data-attachment-id='" + data.id + "'><a href='" + data.url + "'>" + data.filename + "</a></li>"; } var previewID = $('#preview_doc'); previewID.append(preview); } else { $('.add_bank_message').css('color', 'red').text(data.error); } } }) }; var savingwallet = new SavingWallet(); $('#bank_docs').on('change', savingwallet.prepareUpload); /**************************************************************** PHP Processing .... *****************************************************************/ function upload_bank_doc_func() { $usingUploader = 2; $fileErrors = array( 0 => "There is no error, the file uploaded with success", 1 => "The uploaded file exceeds the upload_max_files in server settings", 2 => "The uploaded file exceeds the MAX_FILE_SIZE from html form", 3 => "The uploaded file uploaded only partially", 4 => "No file was uploaded", 6 => "Missing a temporary folder", 7 => "Failed to write file to disk", 8 => "A PHP extension stoped file to upload" ); $posted_data = isset( $_POST ) ? $_POST : array(); $file_data = isset( $_FILES ) ? $_FILES : array(); $data = array_merge( $posted_data, $file_data ); // check_ajax_referer( 'add_bank_docs_nonce', 'nonce' ); $response = array(); if( $usingUploader == 1 ) { $uploaded_file = wp_handle_upload( $data['upload_bank_doc'], array( 'test_form' => false ) ); if( $uploaded_file && ! isset( $uploaded_file['error'] ) ) { $response['response'] = "SUCCESS"; $response['filename'] = basename( $uploaded_file['url'] ); $response['url'] = $uploaded_file['url']; $response['id'] = $uploaded_file['id']; $response['type'] = $uploaded_file['type']; } else { $response['response'] = "ERROR"; $response['error'] = $uploaded_file['error']; } } elseif ( $usingUploader == 2) { $attachment_id = media_handle_upload( 'upload_bank_doc', 0 ); if ( is_wp_error( $attachment_id ) ) { $response['response'] = "ERROR"; $response['error'] = $fileErrors[ $data['upload_bank_doc']['error'] ]; } else { $fullsize_path = get_attached_file( $attachment_id ); $pathinfo = pathinfo( $fullsize_path ); $url = wp_get_attachment_url( $attachment_id ); $response['response'] = "SUCCESS"; $response['filename'] = $pathinfo['filename']; $response['id'] = $attachment_id; $response['url'] = $url; $type = $pathinfo['extension']; if( $type == "jpeg" || $type == "jpg" || $type == "png" || $type == "gif" ) { $type = "image/" . $type; } $response['type'] = $type; } } echo json_encode( $response ); die(); } add_action("wp_ajax_upload_bank_doc", "upload_bank_doc_func"); |