在表单上上传图片时指定文件名答案

【问题标题】：specify file name on upload image on form在表单上上传图片时指定文件名
【发布时间】：2014-01-23 14:05:43
【问题描述】：

你好我正在构建一个上传图像的表单，它可以正常工作，但我想添加一些额外的东西，以便能够指定图像将保存为什么。这就是我所拥有的，代码 sn-p

<?php

//upload.php

$output_dir = "uploads/";

if(isset($_FILES["myfile"]))

{
    //Filter the file types , if you want.

    if ($_FILES["myfile"]["error"] > 0)

    {
      echo "Error: " . $_FILES["file"]["error"] . "<br>";

    }
    else
    {
        //move the uploaded file to uploads folder;
        move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir. $_FILES["myfile"]["name"]);

     echo "Uploaded File :".$_FILES["myfile"]["name"];
    }

}
?>

HTML：

<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<style>
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
#progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
#bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
#percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
</head>
<body>
<h1>Ajax File Upload Demo</h1>

<form id="myForm" action="upload.php" method="post" enctype="multipart/form-data">
     <input type="file" size="60" name="myfile">
     <input type="submit" value="Ajax File Upload">
 </form>

 <div id="progress">
        <div id="bar"></div>
        <div id="percent">0%</div >
</div>
<br/>

<div id="message"></div>

<script>
$(document).ready(function()
{

    var options = { 
    beforeSend: function() 
    {
        $("#progress").show();
        //clear everything
        $("#bar").width('0%');
        $("#message").html("");
        $("#percent").html("0%");
    },
    uploadProgress: function(event, position, total, percentComplete) 
    {
        $("#bar").width(percentComplete+'%');
        $("#percent").html(percentComplete+'%');

    },
    success: function() 
    {
        $("#bar").width('100%');
        $("#percent").html('100%');

    },
    complete: function(response) 
    {
        $("#message").html("<font color='green'>"+response.responseText+"</font>");
    },
    error: function()
    {
        $("#message").html("<font color='red'> ERROR: unable to upload files</font>");

    }

}; 

     $("#myForm").ajaxForm(options);

});

</script>
</body>

</html>

【问题讨论】：

你能把代码贴在这里吗？只需将move_uploaded_file 中的$_FILES["myfile"]["name"] 更改为您想要的。
根据用户输入或预设命名？
好吧，我试试看，但是否也可以指定保存它的格式，例如 jpg,orpng @ putvande
这不起作用@putvande

标签： php

【解决方案1】：

试一试，但您需要在某些验证上做一些工作。

它使用表单输入 <input type="text" name="upload_name"> 来给它一个自定义名称。

测试过

HTML 表单

<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<style>
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
#progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
#bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
#percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
</head>
<body>
<h1>Ajax File Upload Demo</h1>

<form id="myForm" action="upload.php" method="post" enctype="multipart/form-data">

Name it: 
<input type="text" name="upload_name">

<br>
     <input type="file" size="60" name="myfile">
     <input type="submit" value="Ajax File Upload">
 </form>

 <div id="progress">
        <div id="bar"></div>
        <div id="percent">0%</div >
</div>
<br/>

<div id="message"></div>

<script>
$(document).ready(function()
{

    var options = { 
    beforeSend: function() 
    {
        $("#progress").show();
        //clear everything
        $("#bar").width('0%');
        $("#message").html("");
        $("#percent").html("0%");
    },
    uploadProgress: function(event, position, total, percentComplete) 
    {
        $("#bar").width(percentComplete+'%');
        $("#percent").html(percentComplete+'%');

    },
    success: function() 
    {
        $("#bar").width('100%');
        $("#percent").html('100%');

    },
    complete: function(response) 
    {
        $("#message").html("<font color='green'>"+response.responseText+"</font>");
    },
    error: function()
    {
        $("#message").html("<font color='red'> ERROR: unable to upload files</font>");

    }

}; 

     $("#myForm").ajaxForm(options);

});

</script>
</body>

</html>

PHP

<?php

$upload_name = $_POST['upload_name'];

$idx = strpos($_FILES['myfile']['name'],'.');
$ext = substr($_FILES['myfile']['name'],$idx);

$file_name = $upload_name . $ext;

$output_dir = "uploads/";

if(isset($_FILES["myfile"]))

{
    //Filter the file types , if you want.

    if ($_FILES["myfile"]["error"] > 0)

    {
      echo "Error: " . $_FILES["file"]["error"] . "<br>";

    }
    else
    {
        //move the uploaded file to uploads folder;

//        move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir. $_FILES["myfile"]["name"]);

//     echo "Uploaded File :".$_FILES["myfile"]["name"];


 move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir.$file_name);

 echo "Uploaded File :" . $file_name;

    }

}
?>

脚注：

链接到他们的项目页面http://malsup.com/jquery/form/，您可以在其中下载所有文件，而不是从他们的网站获取 JS。

【讨论】：

不客气，很高兴我能帮上忙。这对我有用，但是我没有在重命名部分使用任何空格。我在输入框中调用了我的“test1”，文件被上传为“test1.jpg”，是一个 JPG 文件。如果这有效，请接受正确关闭问题的答案。干杯@user3215045
好，很有魅力，还有一个问题，我想将上传的所有其他格式的图像转换为 jpg，所以我只有带有 jpg 扩展名的图像，这可能是问候。
太好了，很高兴你喜欢它。但是，我不太明白您的意思；这是我不太明白的“转换”部分。你能详细说明一下吗？ @user3215045
好的，我想要上传 png 图片并且我的表单/上传功能将其强制转换为 jpg 扩展名的情况，就像在 facebook 提要上上传图片一样，它会自动转换为 jpg ，你现在明白了吗
嗯，好的。好吧，我以前从未处理过的那部分。我相信这个关于 SO 的答案会更好地解释它stackoverflow.com/a/14431437/1415724 ---您可以根据我在谷歌搜索这些关键字“将 png 转换为 jpg 上传文件 php”后发现的内容进一步研究，在那里我发现了很多结果。 - - 我希望这有帮助。 @user3215045