通过ajax php上传图像并在隐藏输入字段中返回图像名称

问题描述 投票：0回答：1

我有一张带有一个图像上传字段的表单。

我想用ajax上传图像文件，并在提交带有其他输入字段（如姓名、电子邮件、手机等）的主表单之前，通过ajax成功使用返回的图像名称填充表单中的一个隐藏字段......

我尝试过以下代码，但没有成功......

HTML 表单代码：

<label>Upload File:</label>
  <input name="userFile" id="userFile" type="file" class="form-control"><br>
  <button name="marksheet_upload" id="marksheet_upload" class="btn btn-success">Upload</button>

<label>Image Final Name</label>
  <input type="text" class="form-control" id="intern_marksheet_image" name="intern_marksheet_image"> 
 // This above field will be hidden and after image file upload, this value should get via ajax response

<div id="loader-icon" style="display:none;"><img src="images/123.gif"></div>

JAVASCRIPT

<script type="text/javascript">
$(document).ready(function(){
// File upload via Ajax
   $("#marksheet_upload").click(function(e) {
     var dataimg = new FormData();
     var marksheet = $('#userFile')[0].files[0];
    //append files
    dataimg.append('userFile', marksheet);
    
    
    e.preventDefault();

    $.ajax({
       
        type: 'POST',
        url: 'register-file-upload.php',
        data: dataimg,
        contentType: false,
        enctype: 'multipart/form-data',
        cache: false,
        processData:false,
        beforeSend: function(){
            $('#loader-icon').show();
        },
        
        success: function(response){
            if(response.upload == 'ok'){
                $('#intern_marksheet_image').val(response.image_name);
                $('#loader-icon').html(response.image_error);
                
            }else {
                $('#intern_marksheet_image').val('xxx');
                $('#loader-icon').html(response.image_error);
            }
        }
    });
});
</script>

PHP ajax url -

register-file-upload.php
代码：

 <?php
  function randStrGen601($len){
    $result = "";
    $chars = "0123456789abcdefghijklmnopqrstuvwxyz";
    $charArray = str_split($chars);
      for($i = 0; $i < $len; $i++){
        $randItem = array_rand($charArray);
        $result .= "".$charArray[$randItem];
      }
    return $result;
  }

$error = false;
$imagetypeerror = false;

if (isset($_FILES['userFile'])) {
            $avatar1 = $_FILES['userFile'];
            $avatarname1 = $_FILES['userFile']['name'];
            $avatarsize1 = $_FILES['userFile']['size'];
            $minsize1    = 100000; // 100 KB 
            $maxsize1    = 500000; //500 KB 
            $acceptable1 = array(
                'image/jpeg',
                'image/jpg',
                'image/png'
            );
            
            if(function_exists('finfo_open')){    //(PHP >= 5.3.0, PECL fileinfo >= 0.1.0)
                $fileinfo1 = finfo_open(FILEINFO_MIME_TYPE);
                    if(!empty($avatar1['tmp_name'])){
                        if (!in_array(finfo_file($fileinfo1, $avatar1['tmp_name']), $acceptable1)) {
                            $msg  = "Marksheet Image is not a valid image, Only 'JPG' & 'PNG' Types Are Allowed";                           
                            $error = true;
                            $imagetypeerror = true;
                            
                            $data['upload'] = "Err";
                            $data['image_error'] = $msg;
                            $data['image_name'] = "";
                        }
                    }
            }else if(function_exists('mime_content_type')){  //supported (PHP 4 >= 4.3.0, PHP 5)
                    if (!in_array(mime_content_type($avatar1['tmp_name']), $acceptable1)) {
                            $msg  = "Marksheet Image is not a valid image, Only 'JPG' & 'PNG' Types Are Allowed";
                            $error = true;
                            $imagetypeerror = true;
                            
                            $data['upload'] = "Err";
                            $data['image_error'] = $msg;
                            $data['image_name'] = "";
                        }
            }else{
                if (!@getimagesize($avatar1['tmp_name'])) {  //@ - for hide warning when image not valid
                            $msg  = "Marksheet Image is not a valid image, Only 'JPG' & 'PNG' Types Are Allowed";
                            $error = true;  
                            $imagetypeerror = true;
                    
                            $data['upload'] = "Err";
                            $data['image_error'] = $msg;
                            $data['image_name'] = "";
            }
            }
            
        if(!$imagetypeerror){
            if( (!isset($avatarname1)) || (empty($avatarname1)) || ($avatarsize1 == 0)) {                               
                            $error = true;
                            $msg= "Please browse and upload the Marksheet Image";                               
                            $data['upload'] = "Err";
                            $data['image_error'] = $msg;
                            $data['image_name'] = "";
            }
            if ( (!empty($avatarname1)) && ($avatarsize1 >= $maxsize1)) {                               
                            $error = true;
                            $msg = 'Marksheet Image Size Is Too Large. Image Must Be Less Than 500 KB.';
                            $data['upload'] = "Err";
                            $data['image_error'] = $msg;
                            $data['image_name'] = "";
            }
            if ( (!empty($avatarname1)) && ($avatarsize1 <= $minsize1)) {                               
                            $error = true;
                            $msg = 'Marksheet Image Size Is Too Small. Image Must Be Greater Than 100 KB.';
                            $data['upload'] = "Err";
                            $data['image_error'] = $msg;
                            $data['image_name'] = "";
            }
        }





 if(!$error){    
         $targetDir = "uploads/intern/";    
         $fileName = $_FILES['userFile']['tmp_name']; 
         $udx = date("YmdHis");
         $random2 = randStrGen601(4);
         $fileName1 = strtolower($fileName);
         $fileName2 = str_replace(" ", "_", $fileName1);
         $targetFilePath = $targetDir.$fileName2; 
 
       // Upload file to the server 
         move_uploaded_file($fileName2, $targetFilePath));
      
        $error = false;
        $data['upload'] = "ok";
        $data['image_error'] = "File Uploaded Successfully";
        $data['image_name'] = $fileName2;       
 
     }
 } 
//returm $data; 
  echo $data;

?>

使用此代码，我只是在隐藏输入字段中获取“XXX”作为图像文件名并加载图像。图片未上传。

php jquery ajax file-upload
1个回答
0
投票

您的原始代码有一些错误：

  1. 右大括号/中括号与左大括号/方括号不匹配，因此在 $(document).ready 块末尾添加 

    })

  2. 在 PHP 脚本中使用 

    echo json_encode($data)
    代替 
    echo $data
    ，否则我们无法正确返回数组数据

  3. 在ajax块中添加

    dataType: "json",
    ，以处理PHP返回的json字符串

  4. 去掉

    )
    中最后一个
    move_uploaded_file($fileName2, $targetFilePath));
    （否则PHP肯定会失败）

所以，HTML / JS 将是：

<script
  src="https://code.jquery.com/jquery-3.7.1.js"
  integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
  crossorigin="anonymous"></script>


<label>Upload File:</label>
  <input name="userFile" id="userFile" type="file" class="form-control"><br>
  <button name="marksheet_upload" id="marksheet_upload" class="btn btn-success">Upload</button>

<label>Image Final Name</label>
  <input type="text" class="form-control" id="intern_marksheet_image" name="intern_marksheet_image"> 
<div id="loader-icon" style="display:none;">Uploading....</div>




<script type="text/javascript">
$(document).ready(function(){
   $("#marksheet_upload").click(function(e) {
     var dataimg = new FormData();
     var marksheet = $('#userFile').prop("files")[0];
     dataimg.append('userFile', marksheet);
    
    
    e.preventDefault();

    $.ajax({
       
        type: 'POST',
        url: 'register-file-upload.php',
        data: dataimg,
        dataType: "json",
        contentType: false,
        enctype: 'multipart/form-data',
        cache: false,
        processData:false,
        beforeSend: function(){
            $('#loader-icon').show();
        },
        
        success: function(response){
            if(response["upload"] == 'ok'){
                $('#intern_marksheet_image').val(response["image_name"]);
                $('#loader-icon').html(response["image_error"]);
                
            }else {
                $('#intern_marksheet_image').val('- failed -');
                $('#loader-icon').html("Not Successful");
            }
        }
    });
});

   })

</script>

PHP 将是

<?php
function randStrGen601($len){
    $result = "";
    $chars = "0123456789abcdefghijklmnopqrstuvwxyz";
    $charArray = str_split($chars);
      for($i = 0; $i < $len; $i++){
        $randItem = array_rand($charArray);
        $result .= "".$charArray[$randItem];
      }
    return $result;
  }

$error = false;
$imagetypeerror = false;

/*

The image validation part - I remove them so as to focus on the file upload

*/

 if(!$error){    
         $targetDir = "./uploads/";    
         $fileName = $_FILES['userFile']['tmp_name']; 
//         $udx = date("YmdHis");
         $random2 = randStrGen601(4);
         $fileName1 = $random2 . "_". $_FILES['userFile']['name'] ;
         $fileName2 = str_replace(" ", "_", $fileName1);
         $targetFilePath = $targetDir.$fileName2; 
 
       // Upload file to the server 
         move_uploaded_file($fileName, $targetFilePath);
      
        $error = false;
        $data['upload'] = "ok";
        $data['image_error'] = "File Uploaded Successfully";
        $data['image_name'] = $fileName2;       
 
     }
  
//returm $data; 
  echo  json_encode($data);

?>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.