Javascript 如何通过ajax在wordpress前端上传图像
我正在开发wordpress插件以进行签入(当您在打开的模式窗口中单击“签入”按钮,并通过ajax提交您的位置和评论,然后我将该数据保存到数据库中)。现在我需要在同一个模式字段上使用ajax上传文件。我已经尝试发送新的表单对象,但我无法插入操作(对于wordpress wp_ajax_acion),并且我没有在背面和背面接收文件如果您有从wordpress前端上传ajax图像的经验,请帮助我。 我试过使用js:Javascript 如何通过ajax在wordpress前端上传图像,javascript,php,jquery,ajax,wordpress,Javascript,Php,Jquery,Ajax,Wordpress,我正在开发wordpress插件以进行签入(当您在打开的模式窗口中单击“签入”按钮,并通过ajax提交您的位置和评论,然后我将该数据保存到数据库中)。现在我需要在同一个模式字段上使用ajax上传文件。我已经尝试发送新的表单对象,但我无法插入操作(对于wordpress wp_ajax_acion),并且我没有在背面和背面接收文件如果您有从wordpress前端上传ajax图像的经验,请帮助我。 我试过使用js: `jQuery(document).on('change','#cc_slika',
`jQuery(document).on('change','#cc_slika', function(e){
var slic = jQuery('#cc_slika').val();
var slicica = jQuery('#upload-image-form');
var forma = new FormData(slicica);
forma.append('slika', slic);
e.preventDefault();
jQuery.ajax({
url: mySecondAjax.ajaxurl,
type: "POST",
data:{
action:'cc_upload_images',
form: forma,
},
contentType: false,
cache: false,
processData:false,
success: function(data)
{
alert(data);
//jQuery("#targetLayer").html(data);
},
error: function()
{
}
});
})`
在服务器端,我已经完成了$u请求数组的简单打印,但是我得到了0作为响应。这是代码:
<?php
add_action('wp_ajax_cc_upload_images', 'cc_upload_image');
function cc_upload_image(){
//$slika = file_get_contents('php://input');
//$slika1 = serialize($slika);
//$upload_overrides = array( 'test_form' => false );
//$premestanje_slike = wp_handle_upload( $slika, $overrides);
// $slicica = $premestanje_slike['url'];
//$bla = array('answer' => $slika);
print_r($_REQUEST);
exit();
}
?>
我有一个wp安装:下面的例子是一个多图像上传。但老实说,由于请求所涉及的时间,我放弃了ajax。它在上传之前调整图像的大小 前端
function resizeBase64Img(base64, width, height) {
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
var context = canvas.getContext("2d");
var deferred = $.Deferred();
$("<img/>").attr("src", base64).load(function() {
context.scale(width/this.width, height/this.height);
context.drawImage(this, 0, 0);
deferred.resolve($("<img/>").attr("src", canvas.toDataURL('image/jpg')));
});
return deferred.promise();
}
function readFile(file) {
var reader = new FileReader();
var deferred = $.Deferred();
reader.onload = function(event) {
deferred.resolve(event.target.result);
};
reader.onerror = function() {
deferred.reject(this);
};
if (/^image/.test(file.type)) {
reader.readAsDataURL(file);
} else {
reader.readAsText(file);
}
return deferred.promise();
}
jQuery(document).on('change', '.imageup', function(event){
var maximages=4;
var imagecount=jQuery("#imagesholder > div").length;
var length= this.files.length;
var images= new FormData;
var processKey=0;
var i=1;
jQuery.each(event.target.files, function(key, value){
// number of images control.
imagecount++;
if(imagecount > maximages) {
var full=true;
jQuery('.imageup').remove();
jQuery('#imageinput').html("Image Quota Full, Please delete some images if you wish to change them");
return;
} else if (imagecount == maximages) {
var full=true;
jQuery('.imageup').remove();
jQuery('#imageinput').html('<div class="image-box-full">Image Quota Full: delete images to change them</div>');
}
//call resize functions
var name=value;
$.when( readFile(value) ).done(function(value) {
resizeBase64Img(value, 300, 200).done(function(newImg){
images[processKey]=[];
images[processKey]['url']=newImg[0].src;
images[processKey]['name']=name.name;
processKey++;
if(length===processKey) {
//----------------INSERT AJAX TO RUN HERE SUBMITTING IMAGES (THE FORMDATA) E.G
jQuery.ajax({
url: '/wp-admin/admin-ajax.php',
type: 'POST',
action: 'uploadimg',
data: images,
cache: false,
processData: false,
contentType: false,
success: function(data) {
console.log(data);
}
});
}
$('#imagesholder').append('<div id="delete'+i+'">'+'<div class="image-box"><div class="box-image"><img src="'+newImg[0].src+'" style="width:50px;"/></div><div class="image-box-text">'+name.name+'</div><input type="image" src="http://testserverdavideec.mx.nf/wp-content/uploads/2014/04/success_close.png" class="deletebutton" id="delete/i'+i+'"/></div> </div>');
i++;
if(full === true) {
jQuery('.image-box-full').show();
}
});
});//end when
});//end each
jQuery(this).val('');
});//end on change
你最好的资源是下载一个插件,它可以做到这一点,并查看源代码。当然,我想如果有人有简单的解决方案,那就太好了。请分享一些你尝试过的代码。我现在添加了有问题的代码
function uploadimg() {
$error = false;
//if ( ! function_exists( 'wp_handle_upload' ) ) require_once( ABSPATH . 'wp-admin/includes/file.php' );
//$upload_overrides = array( 'test_form' => false );
$images=array();
$a=0;
unset ($_POST['action']);
foreach($_POST as $basefile){
$upload_dir = wp_upload_dir();
$upload_path = str_replace( '/', DIRECTORY_SEPARATOR, $upload_dir['path'] ) . DIRECTORY_SEPARATOR;
$base64_string = $basefile;
echo $basefile;
$base64_string = preg_replace( '/data:image\/.*;base64,/', '', $base64_string );
$decoded_string= base64_decode($base64_string); // 0 bytes written in fwrite
$source = imagecreatefromstring($decoded_string); // 0 bytes written in fwrite
$output_file = $upload_path.'myfilef'.$a.'.jpg';
$images[]=$output_file;
$a++;
$image = fopen( $output_file, 'wb' );
$bytes=fwrite( $image, $source);
echo $bytes;
fclose( $image );
}
echo json_encode($images);
exit;
}
add_action('wp_ajax_uploadimg', 'uploadimg');
add_action('wp_ajax_nopriv_uploadimg', 'uploadimg');