使用AJAX或JQuery或php中的JavaScript使用7个单独的文件输入标签上传7个文件

Question

My client wants to upload the file without using <form> tag & also without using submit button in php.

I know how to upload the file in PHP but I really don't know how to do it without using <form> tag.

He only wants us to use <button> tag. How to do it without using <form> tag. I've searched everywhere but I didn't find any solutions to it. Here is my HTML code:

file1
<input type="file" id="file1" name="file1" accept="*.jpg"><hr>
file2
<input type="file" id="file2" name="file2" accept="*.jpg"><hr>
file3
<input type="file" id="file3" name="file3" accept="*.jpg"><hr>
file4
<input type="file" id="file4" name="file4" accept="*.jpg"><hr>
file5
<input type="file" id="file5" name="file5" accept="*.jpg"><hr>
file6
<input type="file" id="file6" name="file6" accept="*.jpg"><hr>
file7
<input type="file" id="file7" name="file7" accept="*.jpg"><hr>
<button id='upload' name='upload'>Upload</upload>

Please help me I want it very badly. Please don't discard it as saying not enough work done. Thank you.

Answer 1

https://blueimp.github.io/jQuery-File-Upload/

You need to use jquery form library

first downlaod the jquery form library for form submit

html code like :

 <div class="row">
        <div class="col-md-4 col-xs-12">
        <div class="form-group">
                <form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
                Upload your image <input type="file" name="photoimg" id="photoimg" />
                </form>
                <div id='preview'>
            </div>

and the jquery/js code like :

document.getElementById("photoimg").onchange = function()
   { 
                   $("#preview").html('');
                $("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
            $("#imageform").ajaxForm({
                        target: '#preview'
        }).submit();

            };

and ajaximage.php like

<?php

//include('db.php');
session_start();
$session_id='1'; //$session id
$path = "photo/";
    $valid_formats = array("jpg", "png", "gif", "bmp","JPG","PNG","GIF");
    if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
        {       $name = $_FILES['photoimg']['name'];
            $size = $_FILES['photoimg']['size'];
            if(strlen($name))
                {
                    list($txt, $ext) = explode(".", $name);
                    if(in_array($ext,$valid_formats))
                    {
                    if($size<(1024*1024))
                        {
                            $actual_image_name = time().substr(str_replace(" ", "_", $txt), 5).".".$ext;
                            $tmp = $_FILES['photoimg']['tmp_name'];
                            if(move_uploaded_file($tmp, $path.$actual_image_name))
                                {

                                    echo "<img src='photo/".$actual_image_name."'  class='preview'>";
                                                                        echo "<input type='hidden' name='imageName' value='".$actual_image_name."' id='imageName'>";                                                                   

                                }
                            else
                                echo "failed";
                        }
                        else
                        echo "Image file size max 1 MB";                    
                        }
                        else
                        echo "Invalid file format..";   
                }

            else
                echo "Please select image..!";

            exit;
        }
?>

Answer 2

您可以使用AJAX，在单击按钮时调用一个函数，然后使用AJAX将数据发送到服务器而无需提交表单。