使用Javascript和php上传已调整大小的图像和该图像的名称。

时间:2016-02-05 02:33:09

标签: javascript php image

我现在已经研究了这个问题2周了。我找到了许多用于调整大小和上传的解决方案,但没有一个解决了这两个要求。我找到了一个很好的解决方案来调整图像大小并将其上传到php。但是,上传的文件会被赋予唯一的ID,名称。我想给图像文件我自己的ID,名称,我想从一个带有输入字段的表单中获取。我只希望一次加载一张已调整大小的图像。

以下是上传已调整大小的图片的代码。

{{1}}

1 个答案:

答案 0 :(得分:0)

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

<?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; 
...