javascript - 使用 Javascript 和 php 上传调整大小的图像并为该图像命名。-6ren

javascript - 使用 Javascript 和 php 上传调整大小的图像并为该图像命名。

转载作者：行者123 更新时间：2023-11-28 06:24:53

24

4

我已经研究这个问题两周了。我找到了许多调整大小和上传的解决方案，但没有一个能够结合这两种要求。我找到了一个很好的解决方案来调整图像大小并将其上传到 php。然而，上传的文件被赋予一个唯一的 ID、名称。我想为图像文件提供我自己的 ID、名称，我想从带有输入字段的表单中获取该 ID。我只想一次加载一张调整大小的图像。

下面是上传调整大小的图像的代码。

<?php
if ($_POST ) {
    define('UPLOAD_DIR', 'photo_test/');
    $img = $_POST['image'];
    $img = str_replace('data:image/jpeg;base64,', '', $img);  // remove Header for image
    $img = str_replace(' ', '+', $img);                       // insert + sign for space
    $data = base64_decode($img);                              // restore data to original format, binary
    $file = UPLOAD_DIR . uniqid() . '.jpg';                   // set file location & name 
    $success = file_put_contents($file, $data);               // Save the image file
    print $success ? $file : 'Unable to save the file.';
 }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
</head>
<body>
<div class="row">
      <label for="fileToUpload">Select Files to Upload</label><br />
      <input type="file" name="filesToUpload[]" id="filesToUpload" multiple="multiple" />
      <output id="filesInfo"></output>
</div>
<form name="Upload_Image" id="Upload_Image" enctype="multipart/form-data" method="post" action="uploadResized.php">
<div class="row2">
   Enter name for output file:&nbsp; <input  id="Image_Name" name="Image_Name" />&nbsp;&nbsp;&nbsp;
  <input name ="Load_Data" type="submit" value="Upload Data" />
</div>
</form>
<script>
if (window.File && window.FileReader && window.FileList && window.Blob) {
    document.getElementById('filesToUpload').onchange = function(){
        var files = document.getElementById('filesToUpload').files;
        for(var i = 0; i < files.length; i++) {
            resizeAndUpload(files[i]);
        }
    };
} else {
    alert('The File APIs are not fully supported in this browser.');
}
function resizeAndUpload(file) {
var reader = new FileReader();
    reader.onloadend = function() {
    var tempImg = new Image();
    tempImg.src = reader.result;
    tempImg.onload = function() {
        var MAX_WIDTH = 1200;
        var MAX_HEIGHT = 1000;
        var tempW = tempImg.width;
        var tempH = tempImg.height;
        if (tempW > tempH) {
            if (tempW > MAX_WIDTH) {
               tempH *= MAX_WIDTH / tempW;
               tempW = MAX_WIDTH;
            }
        } else {
            if (tempH > MAX_HEIGHT) {
               tempW *= MAX_HEIGHT / tempH;
               tempH = MAX_HEIGHT;
               }
        }
        var canvas = document.createElement('canvas');
        canvas.width = tempW;
        canvas.height = tempH;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(this, 0, 0, tempW, tempH);
        var dataURL = canvas.toDataURL("image/jpeg");
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(ev){
            document.getElementById('filesInfo').innerHTML = 'Done!';
        };
        xhr.open('POST', 'uploadResized.php', true);
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        var data =  'image=' + dataURL; 
        xhr.send(data); 
      }
   }
   reader.readAsDataURL(file);
}
</script>
</body>
</html>

最佳答案

您可以简单地编辑代码，并达到您的目的:

<?php
    if ($_POST ) {
        define('UPLOAD_DIR', 'photo_test/');
        $img = $_POST['image'];
        $img = str_replace('data:image/jpeg;base64,', '', $img);  // remove Header for image
        $img = str_replace(' ', '+', $img);                       // insert + sign for space
        $data = base64_decode($img);                              // restore data to original format, binary

        // get image name.
        $imgName = $_POST['imgName'];
        // uniqid() can simple replace with an image name
        $file = UPLOAD_DIR . imgName . 'some id' . '.jpg';                   // set file location & name 
        $success = file_put_contents($file, $data);               // Save the image file
        print $success ? $file : 'Unable to save the file.';
    }
?>
...
if (window.File && window.FileReader && window.FileList && window.Blob) {
    document.getElementById('filesToUpload').onchange = function(){
        var files = document.getElementById('filesToUpload').files;

        // get image name.
        var ImageName = document.getElementById('Image_Name');
        for(var i = 0; i < files.length; i++) {
            resizeAndUpload(ImageName, files[i]);
...
// pass the ImageName to function
function resizeAndUpload(ImageName, file) {
...
        // send it to php too
        var data =  'ImageName='+ImageName+'&image=' + dataURL; 
...

关于javascript - 使用 Javascript 和 php 上传调整大小的图像并为该图像命名。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35215356/

24

4

0

文章推荐： javascript - 克隆 JavaScript 事件对象

文章推荐： javascript - Angular js数据绑定(bind)-全局数据？

PHP 命名空间组织、命名
我面临以下问题: 我有一个命名空间 Exception\* , 其中包含多种类型异常(exception)。我有一个命名空间 Exception\User\* ，其中包含一个特定类型的异常 (
单个气泡的 Highcharts 命名
新的 Highcharts v3.0 气泡图看起来很棒。是否可以用名称/一些文本注释和显示每个气泡？谢谢，奈杰尔。最佳答案您需要做两件事。首先，命名每个数据点(气泡): data: [ {
openssl - EVP_CIPHER* 命名
我通过使用 EVP_get_cipherbyname("AES-256-CTR") 获得了 EVP_CIPHER*，现在我想找到一种方法从 EVP_CIPHER* 返回到原始名称，在本例中为“AES-
javascript - 命名；在javascript中动态创建变量
为了避免 JavaScript 堆问题，我使用多个数组:family1、family2、family3 ...、dogs1、dogs2、dogs3 ... 使用示例:“family1 和 dogs1”
JavaScript 函数..命名？
我很难理解这段代码。这不是我熟悉的典型 Javascript 函数语法。这是一个命名函数吗？或者这是更新事件的回调？抱歉，我对新手问题很陌生，我对 JS 还很陌生。我了解正在发生的一切，除了这个函数语
python - 动态文件创建(命名)
是否可以在 python 中执行以下操作？ i=1 while True: w = open("POSCAR_i","w") i=i+1 if i<10:
函数的 JavaScript 命名
我问这个是因为我刚刚在一段代码上看到它: var myVar = function func(arg){ console.log(arg); } 我不明白为什么函数在为 myVar 定义之前被“
javax.命名.AuthenticationException
我正在尝试为 ActiveDirectory 创建上下文(客户端和服务器都是 Windows)，使用我的 Windows 凭据和 NTLM。这是我的代码: public void func() {
javax.命名.NameNotFoundException
我正在运行一个使用 JBoss5 容器的 ejb 示例。我正在使用一个例子 from here(Part one) . 在示例中，我在 JBoss 中部署了 bean，在 Tomcat 中部署了一个应
c# - 命名 BackgroundWorker
我希望能够命名一个 BackgroundWorker 以便于调试。这可能吗？最佳答案我必须尝试，但你不能只设置 Name BackgroundWorker 执行的 DoWork() 方法中的线程？
Android Activity 命名
我在 Android Activity 和其他类之间遇到了越来越多的命名冲突。我想知道你能不能告诉我你是如何避免这些的。遗憾的是，关于 SO 的相关问题并未涵盖我的特定命名问题。第一个例子我有一个
angular - 命名 socket 中的延迟加载模块抛出错误
当我尝试使用 loadChildren 加载模块以在命名 socket 中加载模块的组件时，出现抛出错误。有没有办法在命名的路由器 socket 中延迟加载模块？ //html //routing
bash - 开始通过 Cron 命名？
很难说出这里问的是什么。这个问题是模棱两可的、模糊的、不完整的、过于宽泛的或修辞的，无法以目前的形式得到合理的回答。如需帮助澄清这个问题以便重新打开它，visit the help center .
idris - 命名 v 未命名数据类型参数
在 Type Driven Development with Idris 第 6 章的代码中，我对这段代码感到困惑: data DataStore : Type -> Type where M
.net - 命名 bool 属性的良好指南
通常，如果有一个属性可以获取/设置状态值，我会使用“Is”，例如: Visibility: .IsVisible 但是对于获取/设置操作的属性，最好使用什么？喜欢: Casting shadows:
oop - 形容词的接口(interface)命名
好的，所以如果你可以很容易地想到一个名词，那么命名一个接口(interface)(或类)很容易:用户、窗口、数据库、流等。形容词或形容词的概念呢？例如有时间戳的东西(HasTimestamp、Tim
powershell - 命名 PowerShell 动词的良好准则是什么？
我刚开始学习 PowerShell，我想知道 Posh 中的 cmdlet(或高级功能，无论它们在 CTP3 中称为什么)是否有一些好的动词指南。如果我做一个get-verb，我可以看到很多。但我仍
jquery - 命名 jQuery 函数
$(".song").live('click', function songClick() { //do stuff }); 你能像上面那样命名一个函数，然后稍后再调用它吗？我尝试过，但没有成
SQL TABLE 命名。人与人
关闭。这个问题是opinion-based .它目前不接受答案。想改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 7年前关闭。 Improve this
spring - 命名 DTO 和实体类
我的 Spring 应用程序中有两组类 - DTO 和实体。在阅读了 Bob 叔叔的 Clean Code 之后，我比以往任何时候都更喜欢正确命名事物。我坐下来重构我的一个 Spring 项目，但

首页

博学

6Ren·AI

商城

javascript - 使用 Javascript 和 php 上传调整大小的图像并为该图像命名。