Question

我想一键上传一个文件，所以我尝试将两个点击事件合二为一，但$_FILE变量没有加载图片，这里是我的代码：

    <form target='_self' action='upload.php' method='post' enctype='multipart/form-data'>
        <div class = 'testocentrato'>
        <input style='display:none' type='file' accept='.jpg' name='file' id='file'/>
        <input style='display:none' type='submit' id='caricaimmagine' name='caricaimmagine' />
        <input class='inputfile' type='button' value='Scegli file da PC' onclick='document.getElementById('file').click(); document.getElementById('caricaimmagine').click();' />
        <input style='display:none' type='submit' />
        <input class='inputfile' type='submit'  name='eliminaimmagine' onclick='document.getElementById('eliminaimmagine').click();' value='".$lang['TASTO_ELIMINA_FOTO']."' />
        <input type='hidden' name='id_utente' value='".$user['id']."' />        
   </form>

Answer 1

可以用ajax一键上传图片，勾选https://makitweb.com/how-to-upload-image-file-using-ajax-and-jquery/。这是我的 html 代码，我使用了标签标签，因此当我单击上传图标时，将出现选择文件窗口。

<form method="post"  enctype="multipart/form-data">
    <label class='foto' for="imgid">
            <img id="photo" src="images/photo.png"> 
            <p>Foto</p>
         </label>

        <input type="file" value="chosen File" id="imgid" name="img" accept="image/*">
                
    <img class="previewimg" src="" width="100" height="100">
    <span id="showImagePath" ></span>

    <button class="btn btn-primary" id="toPost">Post</button>
            
</form>

mycss。

                    #imgid{
                display:none;
            }
            .foto{
                float:left;
            }
            .previewimg{
                display:none;
                background-color:grey;
            }
            #imgToPost{
                display:none;
            }

我的jQuery：我使用 setInterval() 函数让我的脚本运行，直到图像被选中，这样才能上传，并且可以预览名称和图像。

$("#photo").click(function(){
                setInterval(function(){
                    var fd = new FormData();
                    var files = $('#imgid')[0].files;
                   // Check file selected or not
                    if(files.length > 0 ){
                       $(".previewimg").show();
                       fd.append('file',files[0]);

                       $.ajax({
                          url: 'action.php?action=postcontentimage',
                          type: 'post',
                          data:fd,
                          contentType: false,
                          processData: false,
                          success: function(result){
                              var name ="";
                                if(result != 0){
                                    $(".previewimg").attr("src", result).show();
                                    for(var i=0; i < result.length;i++){
                                        if(i>8){
                                            name += result[i];
                                        }
                                        $("#showImagePath").html(name);
                                        clearInterval();
                                    }
                                    
                                }
                            }
                        })
                    }else{
                        alert("no image has been selected");
                    }
                    
                }, 2000);
                
            })

我的 PHP：

<?php

if(isset($_FILES['file']['name'])){

   /* Getting file name */
   $filename = $_FILES['file']['name'];

   /* Location */
   $location = "uploads/".$filename;
   $imageFileType = pathinfo($location,PATHINFO_EXTENSION);
   $imageFileType = strtolower($imageFileType);

   /* Valid extensions */
   $valid_extensions = array("jpg","jpeg","png");

   $response = 0;
   /* Check file extension */
   if(in_array(strtolower($imageFileType), $valid_extensions)) {
      /* Upload file */
      if(move_uploaded_file($_FILES['file']['tmp_name'],$location)){
         $response = $location;
      }
   }

   echo $response;
   exit;
}else{

    echo 0;
}
?>

Answer 2

因为您在选择文件之前直接单击了提交。去掉。的document.getElementById（ 'caricaimmagine'）点击（）; 您需要手动单击该按钮。

一键单击html上传文件（图片）

2 个答案: