添加Ajax jQuery的文件上傳

HTML：

<form name="upload_image"> 
    <input id="fileupload" type="file" name="files[]" class="files rhiu" onchange="UploadImage(event);" accept='image/*'/> 
    <div id="progress"> 
     <div class="bar" style="width: 0%;"></div> 
    </div> 
    <ul id="fileList"> 
    <!-- The file list will be shown here --> 
    </ul> 
</form>

PHP：

add_action('wp_ajax_UploadImage', 'UploadImage'); 
add_action('wp_ajax_nopriv_UploadImage', 'UploadImage'); 
function UploadImage() 
{ 
$upload_dir = wp_upload_dir(); 
$files = $_FILES['files']; 
foreach ($files['name'] as $key => $value) {    
    ...ADDING IMAGE TO A POST... 
    } 
} 
echo json_encode($image_path); 
exit; 
}

JS：

function UploadImage(e) 
{ 
    var form = document.forms.namedItem("upload_image"); 
    var formdata = new FormData(form); 
    formdata.append('action', 'UploadImage'); 
    jQuery.ajax({ 
    type: "POST", 
    dataType: "json", 
    url: upload_image.ajax_url, 
    data: formdata, 
    contentType: false, 
    processData: false, 
    success: function(data) {     
     alert('Success'); 
    }  
    }); 
}

由於這些，一切工作正常。

但我想實現所選擇的答案here以下Bluimp jQuery的文件上傳的上傳處理程序。

我有一個很難使用ajax option。

因此，這裏是我想做的事：

使用jQuery的blueimp文件上傳到上傳圖片。
數據通過AJAX功能（「UploadImage」）加入。

我需要什麼樣的變化在js做出包括插件？

我的嘗試：

var form = document.forms.namedItem("upload_video"); 
var formdata = new FormData(form); 
formdata.append('action', 'UploadImage'); 
$('#fileupload').fileupload({ 
    type: "POST", 
    dataType: "json", 
    url: upload_image.ajax_url, 
    data: formdata, 
    add: function (e, data) { 
    var tpl = $('<li class="working">'+ 
     '<input type="text" value="0" data-width="48" data-height="48" data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" />'+ 
     '<p></p><span></span></li>'); 
    tpl.find('p') 
     .text(data.files[0].name) 
     .append('<i>' + formatFileSize(data.files[0].size) + '</i>'); 
    data.context = tpl.appendTo(ul); 
    tpl.find('span') 
     .click(function() { 
     if (tpl.hasClass('working')) { 
      jqXHR.abort(); 
     } 
     tpl.fadeOut(function(){ 
      tpl.remove(); 
     }); 
     }); 
    var jqXHR = data.submit(); 
    }, 
    progressall: function (e, data) { 
    var progress = parseInt(data.loaded/data.total * 100, 10); 
    $('#progress .bar').css(
     'width', 
     progress + '%' 
    ); 
    } 
});

來源

2015-11-24 steve Kim

我注意到的第一件事是在HTML

Need to make form multi-part for image uploading

來源

2015-11-24 09:24:23

添加Ajax jQuery的文件上傳

回答

相關問題