tinymce上传图片php,php – 尝试使用TinyMCE上传图像时出错403

我正在尝试通过TinyMCE上传图像,但是在编辑器本身中显示“HTTP Error：403”.我分别从网站上获取了脚本和php页面的代码：

tinymce.init({

selector: "textarea",

plugins: "link image",

height:300,

setup: function (editor) {

editor.on('change', function () {editor.save();});

},

images_upload_handler: function (blobInfo, success, failure) {

var xhr, formData;

xhr = new XMLHttpRequest();

xhr.withCredentials = false;

xhr.open('POST', 'queries/editorImageUpload.php');

xhr.onload = function() {

var json;

if (xhr.status != 200) {

failure('HTTP Error: ' + xhr.status);

return;

}

json = JSON.parse(xhr.responseText);

if (!json || typeof json.location != 'string') {

failure('Invalid JSON: ' + xhr.responseText);

return;

}

success(json.location);

};

formData = new FormData();

formData.append('file', blobInfo.blob(), blobInfo.filename());

xhr.send(formData);

}

});

然后在’editorImageUpload.php’中,我认为问题与$accepted_origins部分有关,因为它返回403错误：

$accepted_origins = array("https://localhost", "https://77.104.172.194");

$imageFolder = "pictures/Test/";

reset ($_FILES);

$temp = current($_FILES);

if (is_uploaded_file($temp['tmp_name'])){

if (isset($_SERVER['HTTP_ORIGIN'])) {

// same-origin requests won't set an origin. If the origin is set, it must be valid.

if (in_array($_SERVER['HTTP_ORIGIN'], $accepted_origins)) {

header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);

} else {

header("HTTP/1.1 403 Origin Denied");

return;

}

}

任何有关这方面的见解都会非常有帮助.

解决方法:

首先,您的代码存在两个问题

你的PHP代码不会将图像传输到服务器

– 在你的PHP代码中你正在使用“https://localhost”制作$accepted_origins数组,你忘记了不安全的版本“http://localhost”

所以你的问题最快的解决方法是编写有效的PHP代码,将图像传输到你的服务器并返回图像的完整路径,这里是编辑器的PHP代码

editorImageUpload.php

$ds = DIRECTORY_SEPARATOR;

$storeFolder = 'images';

if (!empty($_FILES))

{

$tempFile = $_FILES['file']['tmp_name'];

$targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;

$file_name = substr(md5(rand(1, 213213212)), 1, 5) . "_" . str_replace(array('\'', '"', ' ', '`'), '_', $_FILES['file']['name']);

$targetFile = $targetPath. $file_name;

if(move_uploaded_file($tempFile,$targetFile)){

die( $_SERVER['HTTP_REFERER']. $storeFolder . "/" . $file_name );

}else{

die('Fail');

}

}

?>

并且在你的javascript回调中你必须检查xhr.response而不是xhr.responseText,因为你正在死于图像的完整路径

Tinymce代码

tinymce.init({

selector: "textarea",

plugins: "link image",

height:300,

images_upload_handler: function (blobInfo, success, failure) {

var xhr, formData;

xhr = new XMLHttpRequest();

xhr.withCredentials = false;

xhr.open('POST', 'editorImageUpload.php');

xhr.onload = function() {

var json;

if (xhr.status != 200) {

failure('HTTP Error: ' + xhr.status);

return;

}

console.log(xhr.response);

//your validation with the responce goes here

success(xhr.response);

};

formData = new FormData();

formData.append('file', blobInfo.blob(), blobInfo.filename());

xhr.send(formData);

}

});

标签：php,jquery,tinymce,editor

来源： https://codeday.me/bug/20191009/1876977.html