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(); 
     } 
    } 
} 
?> 

localhost上上传图片。之后，我使用此代码：

<?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隐藏]是a blob这是新图像的网址（请记住，我点击图像后进行更改）。有没有可能使用该网址上传该图片？怎么样？ （请注意，所有图像需要在他们的最终目的地被上传，但是我没有难以处理的其他文件只是我不知道斑点）

Answer 1

我很困惑：d 后很多搜索，我取消了我所做的一切，并重新尝试了原始代码，它正在工作。我想我在接收文件中有一个错字或类似的东西。我想到print_r($_FILE);而不是print_r($_FILES);我不知道。

实际上，实际的挑战是在预览修改（最终）图像后将图像上传到服务器。一次上传几张照片，并根据特定画布显示，具体取决于它们的数量和尺寸。

而不是使用一个非常复杂的（至少对我来说）！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来上传。

尽管我可笑的错字，我希望这会有所帮助。我通过网络看到了许多关于类似问题的奇怪答案。