如何在保存到文件夹（Javascript）之前修复方向（上载图像）？
我尝试以下参考： 我试着这样： 我的代码如下所示：如何在保存到文件夹（Javascript）之前修复方向（上载图像）？,javascript,php,jquery,image,image-uploading,Javascript,Php,Jquery,Image,Image Uploading,我尝试以下参考： 我试着这样： 我的代码如下所示： $(function () { var result = $('#result') var currentFile function updateResults (img, data) { var content if (!(img.src || img instanceof HTMLCanvasElement)) { content = $('<span>Loading image fil
$(function () {
var result = $('#result')
var currentFile
function updateResults (img, data) {
var content
if (!(img.src || img instanceof HTMLCanvasElement)) {
content = $('<span>Loading image file failed</span>')
} else {
content = $('<a target="_blank">').append(img)
.attr('download', currentFile.name)
.attr('href', img.src || img.toDataURL())
var form = new FormData();
form.append('file', currentFile);
$.ajax({
url:'response_upload.php',
type:'POST',
data:form,
processData: false,
contentType: false,
success: function (response) {
console.log(response);
},
error: function () {
console.log(error)
},
});
}
result.children().replaceWith(content)
}
function displayImage (file, options) {
currentFile = file
if (!loadImage(
file,
updateResults,
options
)) {
result.children().replaceWith(
$('<span>' +
'Your browser does not support the URL or FileReader API.' +
'</span>')
)
}
}
function dropChangeHandler (e) {
e.preventDefault()
e = e.originalEvent
var target = e.dataTransfer || e.target
var file = target && target.files && target.files[0]
var options = {
maxWidth: result.width(),
canvas: true,
pixelRatio: window.devicePixelRatio,
downsamplingRatio: 0.5,
orientation: true
}
if (!file) {
return
}
displayImage(file, options)
}
// Hide URL/FileReader API requirement message in capable browsers:
if (window.createObjectURL || window.URL || window.webkitURL ||
window.FileReader) {
result.children().hide()
}
$('#file-input').on('change', dropChangeHandler)
})
$（函数（）{
变量结果=$（“#结果”）
var当前文件
函数更新结果（img，数据）{
var含量
if（！（img.src | | img htmlcanvaseElement实例））{
内容=$（“加载图像文件失败”）
}否则{
内容=$（''）.append（img）
.attr（'download'，currentFile.name）
.attr（'href'，img.src | | img.toDataURL（））
var form=new FormData（）；
form.append（'file'，currentFile）；
$.ajax({
url:'response_upload.php'，
类型：'POST'，
数据：表格，
processData:false，
contentType:false，
成功：功能（响应）{
控制台日志（响应）；
},
错误：函数（）{
console.log（错误）
},
});
}
result.children（）.replaceWith（内容）
}
函数displayImage（文件、选项）{
currentFile=file
如果（！loadImage(
文件
更新结果，
选择权
)) {
result.children（）.replaceWith(
$('' +
“您的浏览器不支持URL或FileReader API。”+
'')
)
}
}
函数dropChangeHandler（e）{
e、 预防默认值（）
e=e.原始事件
var target=e.dataTransfer | | e.target
var file=target&&target.files&&target.files[0]
变量选项={
maxWidth:result.width（），
画布：是的，
pixelRatio:window.devicePixelRatio，
下采样率：0.5，
方向：正确
}
如果（！文件）{
返回
}
显示图像（文件、选项）
}
//在功能强大的浏览器中隐藏URL/FileReader API要求消息：
if（window.createObjectURL | | | | | | | window.webkitURL||
window.FileReader）{
result.children（）.hide（）
}
$（'#文件输入'）。在（'change'，dropChangeHandler）上
})
似乎通过ajax发送的
currentFilecurrentFile画布格式发送文件输入对象。append（'file'，currentFile）修改后的文件不会被发送，只会发送原始文件
如何修复？
由于浏览器限制，您（或插件）无法修改
上的任何内容，您也无法将画布直接发送到服务器，因此唯一的方法（使用和工作良好）是将图像的数据URI作为常规文本发送，然后在服务器上解码，将其写入文件。您可能还希望发送原始文件名，因为数据URI是纯内容，不包含文件名
改变
form.append('file', currentFile);
到
PHP
祝你好运 经过一番研究后，我找到了解决方案，多亏了这个很棒的插件。（canvas-to-blob.js）
此插件将直接将画布转换为服务器，服务器将看到它，就像它是一个实际文件一样，并将在您的$\u文件数组中获得新的（修改的）文件。您只需在画布对象（img
）上调用toBlob
。之后，您将获得blob，然后可以将其发送到FormData中。下面是您更新的updateResults（）
函数
function updateResults (img, data) {
var content
if (!(img.src || img instanceof HTMLCanvasElement)) {
content = $('<span>Loading image file failed</span>')
}
else
{
content = $('<a target="_blank">').append(img)
.attr('download', currentFile.name)
.attr('href', img.src || img.toDataURL())
img.toBlob(
function (blob) {
var form = new FormData();
form.append('file', blob, currentFile.name);
$.ajax({
url:'response_upload.php',
type:'POST',
data:form,
processData: false,
contentType: false,
success: function (response) {
console.log(response);
},
error: function () {
console.log(error)
},
});
},'image/jpeg'
);
result.children().replaceWith(content);
}
}
函数更新结果（img，数据）{
var含量
if（！（img.src | | img htmlcanvaseElement实例））{
内容=$（“加载图像文件失败”）
}
其他的
{
内容=$（''）.append（img）
.attr（'download'，currentFile.name）
.attr（'href'，img.src | | img.toDataURL（））
伊姆格托布洛布(
函数（blob）{
var form=new FormData（）；
append（'file'，blob，currentFile.name）；
$.ajax({
url:'response_upload.php'，
类型：'POST'，
数据：表格，
processData:false，
contentType:false，
成功：功能（响应）{
控制台日志（响应）；
},
错误：函数（）{
console.log（错误）
},
});
}，“图像/jpeg”
);
result.children（）.replacetwith（content）；
}
}
在php中，我添加了以下内容：echo'；打印（$_POST['file']）；回声'；模具（）
以检查结果。但是它太长了，没有显示任何东西，如果我尝试这样做：echo'；打印（美元文件）；回声'；模具（）
，结果空数组如下：array（）
yes$\u POST['file']
将不显示图像，而是显示其编码形式，因此您必须使用base64\u decode
，不要使用$\u FILES
它应该是空的，您可以添加和额外的form.append（'file'，currentFile）但这将只提供原始文件。因此，您必须使用$\u POST['file']
并解码itOkay。我跟随你的方式。那么，如何将数据文件存储在文件夹中？我尝试了echo'；印刷费（$fp）；回声'
，结果：资源id#3
。这不是一个数据文件，我想要这样的结果：Array（[file]=>Array（[name]=>chelsea.jpeg[type]=>image/jpeg[tmp\u name]=>C:\xampp\tmp\php1E31.tmp
$img_data=substr( $_POST['file'] , strpos( $_POST['file'] , "," )+1);
//removes preamble ( like data:image/png;base64,)
$img_name=$_POST['file_name'];
$decodedData=base64_decode($img_data);
$fp = fopen( $img_name , 'wb' );
fwrite($fp, $decodedData);
fclose($fp );
function updateResults (img, data) {
var content
if (!(img.src || img instanceof HTMLCanvasElement)) {
content = $('<span>Loading image file failed</span>')
}
else
{
content = $('<a target="_blank">').append(img)
.attr('download', currentFile.name)
.attr('href', img.src || img.toDataURL())
img.toBlob(
function (blob) {
var form = new FormData();
form.append('file', blob, currentFile.name);
$.ajax({
url:'response_upload.php',
type:'POST',
data:form,
processData: false,
contentType: false,
success: function (response) {
console.log(response);
},
error: function () {
console.log(error)
},
});
},'image/jpeg'
);
result.children().replaceWith(content);
}
}