javascript - PHP，点击图片上传文件

Question

我有这个代码

<?php
// Upload pictures
$folder = '../images/tmp';
foreach ($_FILES['files']['name'] as $i => $name){
    if (strlen($_FILES['files']['name'][$i]) > 1 && (false !== strpos($_FILES['files']['type'][$i],'image'))){
        if (!move_uploaded_file($_FILES['files']['tmp_name'][$i], $folder.'/'.$name)){
            // Redirect to the Upload form
            header('Location: osi_upload.php');
            exit();
        }
    }
}
?>

在本地主机上上传图像。之后，我使用这段代码:

<?php
    $i = -1;
  foreach(glob($folder.'/*') as $filename){
        $file[++$i] = $filename;
    } ?>

    <form action="draft.php" enctype="multipart/form-data" id="img-frm" method="post"><?php
    // Medium and large devices
    switch($gallery){
        case 1:
        { ?>
            <!--Canvas 1-->
            <div class="col-xs-12 no-pad-left-right hide-sm"><?php
      for($n=0;$n<=$i;$n++){ ?>
                <div class="in-block">
        <label for=<?php echo "img-input[".$n."]"; ?>>
          <img id=<?php echo "img-pict[".$n."]"; ?> src=<?php echo "".$file[$n].""; ?> class="canvas-1">
          <div class="alert-success pad-top-bottom text-center" id=<?php echo "img-name[".$n."]" ?>><strong><?php echo basename($file[$n]); ?></strong></div>
        </label>
        <input type="file" id=<?php echo "img-input[".$n."]"; ?>>
        </div>
        <?php
            } ?>
            </div><?php
            break;
        }
...

预览我上传的图片。如果需要，我可以单击其中一张图片打开上传文件对话框来更改相应的图片。要更改图像，我使用以下 javascript 代码:

$(document).ready(function(){
    // Change clicked pictures
    if(!$('#img-frm input[type="file"]')){
        return;
    }
    $('#img-frm input[type="file"]').change(function(){
        // Get the input number
        var str = this.id.split("[");
        var i = str[1].substr(0,str[1].length-1);
        var s = 'img-pict[' + i + ']';
        // Get the new picture address
        var new_img = window.URL.createObjectURL(this.files[0]);
        // Preview the new picture
        document.getElementById(s).src = new_img;
        str = $(this).val().split("\\");
        var n = str.length;
        s = 'img-name[' + i + ']';
        document.getElementById(s).innerHTML = str[n-1];
    });
});

所有这些代码都可以正常工作。我的问题是在我单击图像预览进行更改后上传替换图像。我不知道如何在我更喜欢的 PHP 中更改服务器上的图像。修改后我尝试提交表单，但是在接收文件中，我什么也没有!空白的!有人可以帮忙吗。

也许了解表单的其余部分由文本输入、区域、选择和日期输入组成很重要。当我对这些进行更改时，我会在我的接收文件中收到有关其他表单元素的帖子。对预览图像所做的更改不会发布。

好的!我想我正处于通过这种困惑的方式的开始!!!假设 javascript 难以处理来自发布表单的 $_FILES 数组，我在 HTML 文件中添加了一个隐藏的输入:

<label for=<?php echo "img-input[".$n."]"; ?>>
          <img id=<?php echo "img-pict[".$n."]"; ?> src=<?php echo "".$file[$n].""; ?> class="canvas-1">
          <div class="alert-success pad-top-bottom text-center" id=<?php echo "img-name[".$n."]" ?>><strong><?php echo basename($file[$n]); ?></strong></div>
        </label>
        <input type="file" id=<?php echo "img-input[".$n."]"; ?> name=<?php echo "img-input[".$n."]"; ?>>
        <input type="hidden" value=<?php echo "".$file[$n].""; ?> name=<?php echo "img-hidden[".$n."]"; ?> id=<?php echo "img-hidden[".$n."]"; ?>>

用于在发布后检索文件 url。我更改了我的 javascript 文件以处理隐藏的输入:

$('#img-frm input[type="file"]').change(function(){
// Get the input number
var str = this.id.split("[");
var i = str[1].substr(0,str[1].length-1);
var s = 'img-pict[' + i + ']';
// Get the new picture address
var new_img = window.URL.createObjectURL(this.files[0]);
// Preview the new picture
document.getElementById(s).src = new_img;
s = 'img-hidden[' + i + ']';
document.getElementById(s).value = new_img;
str = $(this).val().split("\\");
var n = str.length;
s = 'img-name[' + i + ']';
document.getElementById(s).innerHTML = str[n-1];
});

我有这个:

Array ( [img-hidden] => Array ( [0] => blob:http://localhost/f8e7a5af-76fa-4da1-b489-387b55395873 [1] => ../images/tmp/templatemo_portfolio02.jpg [2] => ../images/tmp/templatemo_portfolio03.jpg [3] => ../images/tmp/templatemo_portfolio04.jpg [4] => ../images/tmp/templatemo_portfolio05.jpg [5] => ../images/tmp/templatemo_portfolio06.jpg [6] => ../images/tmp/templatemo_portfolio07.jpg [7] => ../images/tmp/templatemo_portfolio08.jpg )

请注意，数组 [img-hidden] 中的第一个索引是一个 blob，它是新图像的 url(请记住，在我点击图像后改变它)。是否可以使用该网址上传该图片？如何？ (请注意，所有图像都需要上传到最终目的地，但我处理其他文件没有问题。只是我不知道 blob)

Answer 1

我很困惑:D经过大量搜索，我取消了我所做的一切并重新尝试了原始代码并且它正在运行。我想我在接收文件中有错别字或类似的东西。我想 print_r($_FILE); 而不是 print_r($_FILES); 我不知道。

事实上，真正的挑战是在预览图像进行修改(最终)后将图像上传到服务器。一次上传几张图片，并根据图片的数量和大小在特定的 Canvas 上显示。

与其使用非常复杂的(至少对我而言!)AJAX API 与服务器通信，我更愿意寻找一种解决方案，让每种语言都能按预期发挥自己的作用。

因此，我使用 HTML 实现了这样一个事实，即我可以单击一张图片并打开上传对话框以选择另一张图片来替换之前的图片。

<label for=<?php echo "img-input[".$n."]"; ?>>
          <img id=<?php echo "img-pict[".$n."]"; ?> src=<?php echo "".$file[$n].""; ?> class="canvas-1">
        </label>
        <input type="file" id=<?php echo "img-input[".$n."]"; ?> name=<?php echo "img-input[".$n."]"; ?>>

label 带有 for= 属性的输入是键。

为了在不重新加载文件的情况下进行替换，当然我使用了 javascript 和一些 JQuery(不是必需的但很有趣)

$(document).ready(function(){
    // Change clicked pictures
    if(!$('#img-frm input[type="file"]')){
        return;
    }
    $('#img-frm input[type="file"]').change(function(){
        // Get the input number
        var str = this.id.split("[");
        var i = str[1].substr(0,str[1].length-1);
        var s = 'img-pict[' + i + ']';
        // Get the new picture address
        var new_img = window.URL.createObjectURL(this.files[0]);

        // Preview the new picture
        document.getElementById(s).src = new_img;
        str = $(this).val().split("\\");
        var n = str.length;
        s = 'img-name[' + i + ']';
        document.getElementById(s).innerHTML = str[n-1];
    });
});

在 var new_img = window.URL.createObjectURL(this.files[0]); 行中，生成您选择替换预览的图像的 URL，并在 行中>document.getElementById(s).src = new_img;，图片加载到你之前点击预览的地方。路径由表单发送，并创建一个 $_FILES 数组。您现在可以使用 PHP 上传。

尽管我的错别字很荒谬，但我希望这会有所帮助。我在网上看到了很多关于类似问题的奇怪答案。