logo标签列表

PHP，点击图片上传文件

javascriptphp
4
我有这段代码。
<?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在处理来自post表单的 $_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（记住，我已经点击图像来更改它）。是否有可能使用该 url 上传该图像？如何做到？（请注意，所有图像都需要上传到它们的最终目的地，但我没有处理其他文件的困难。只是我不知道这些 blobs 如何处理）
#img-frm input[type="file"] 在一个表单中吗？如果是，你可以使用 JavaScript 提交表单。类似这样 document.getElementById("img-frm").submit();（假设 img-frm 是表单 ID）。 - Sergiy T.
正如您在上面的HTML代码中所看到的，#img-frm是表单ID，input[type="file"]是表单内的输入。我已经尝试使用JavaScript提交表单，但结果仍然相同。我想知道问题是否不特定于图像。JavaScript $post变量是否处理$_files数组？ - Patrik
假设您错过了输入名称 <input type="file" id="<?php echo "img-input[".$n."]"; ?>" name="<?php echo "img-input[".$n."]"; ?>">。 - Sergiy T.
我已经纠正了那个问题。但结果仍然没有改变。 - Patrik
我会检查您在提交表单时是否发送了正确的标头，特别是它是否以multipart/form-data的形式发送：http://i.stack.imgur.com/YJYPm.png - BeaverusIV
我真的不太明白你的意思。表单enctype是multipart/form-data。 - Patrik
1个回答
0

我有点困惑 :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."]"; ?>>

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上传。
尽管我的错别字很荒谬，但我希望这能有所帮助。我在网上看到了很多关于类似问题的奇怪答案。
1
$_FILE不存在，这就是你出错的原因。下次在本地工作时，请确保显示错误。 - Drown
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接