使用php和ajax调用在表单上提交单个图像上传

时间:2018-12-04 12:16:56

标签: php jquery ajax file-upload

我有带ajax reqwest的表格

<?php
session_start();

?>

<!DOCTYPE html>


<html lang="en" dir="rtl">

<?php require_once 'tpl/head.php' ?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(document).on('submit', '#newitem', function () {

        var data = $(this).serialize()

        $.ajax({
            type: 'POST',
            url: 'iteminsert.php',
            data: data,

            success:(

                function (data){$(".result").html(data)

                }

            )
        });
        return false;
    });

</script>
<body class="hold-transition skin-blue-light sidebar-mini">
<!-- Site wrapper -->
<div class="wrapper">
    <?php require_once 'tpl/header.php' ?>

  <!-- Left side column. contains the sidebar -->

    <?php require_once 'tpl/sidebar.php' ?>
  <!-- =============================================== -->

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->


    <!-- Main content -->
    <section class="content">




         <div class="row">
             <div class="col-md-6">
                 <div class="box">
                     <div class="box-header with-border">
                         <h3 class="box-title">הוספת פריט למלאי </h3>
                     </div>
                     <!-- /.box-header -->
                     <!-- form start -->
                     <form class="form-horizontal form-element" novalidate="novalidate"  method="POST" id="newitem" enctype="multipart/form-data">
                         <div class="box-body">

                             <div class="form-group row">
                                 <label for="itemtype" class="col-sm-2 control-label">קבוצת פריט</label>
                                 <div class="form-group">

                                     <select class="form-control select2" name="itemtype" style="width: 100%;">
                                         <option disabled selected="selected">אנא בחר סוג קבוצת פריט</option>
                                         <option value="מצלמה">מצלמה</option>
                                         <option value="חתובה"> חצובה למצלמה</option>
                                         <option value="תאורה">תאורה</option>
                                         <option value="תאורה">חצובה לתאורה</option>
                                         <option value="מיק.קווי">מיק.קווי</option>
                                         <option value="מיק.אלחוטי">מיק.אלחוטי</option>
                                         <option value="כרטיס זיכרון">כרטיס זיכרון</option>
                                         <option value="כבל וידאו">כבל ודיאו</option>
                                         <option value="כבל אודיו">כבל אודיו</option>
                                     </select>
                                 </div>
                                 <br/>
                             </div>
                             <div class="form-group row">
                                 <label for="inputEmail3" class="col-sm-2 control-label">שם לתצוגה</label>

                                 <div class="col-sm-10">
                                     <input type="text" name="itemdisplay"   class="form-control" id="inputName" placeholder="תצוגת שם פריט בטופס הזמנת ציוד">
                                 </div>
                             </div>
                             <div class="form-group row">
                                 <label for="inputPassword3" class="col-sm-2 control-label">יצרן</label>

                                 <div class="col-sm-10">
                                     <input type="text" name="brand"   class="form-control" id="inputEmail" placeholder="אנא הזן שם יצרן פריט">
                                 </div>
                             </div>
                             <div class="form-group row">
                                 <label for="inputPassword3" class="col-sm-2 control-label">דגם פריט</label>

                                 <div class="col-sm-10">
                                     <input type="text" name="model"   class="form-control" id="inputPhone" placeholder="אנא הזן דגם פריט">
                                 </div>
                             </div>

                             <div class="form-group row">
                                 <label for="inputPassword3" class="col-sm-2 control-label">תיאור פריט</label>

                                 <div class="col-sm-10">
                                     <textarea type="text" name="spec"   class="form-control" id="inputPassword" placeholder="אנא הזן תיאור פריט"></textarea>
                                 </div>
                             </div>

                             <div class="form-group row">
                                 <label for="inputPassword3" class="col-sm-2 control-label">מספר סידורי</label>

                                 <div class="col-sm-10">
                                     <input type="number" name="sn"  class="form-control" id="inputPhone" placeholder="אנא הזן מספר סידורי">
                                 </div>
                             </div>

                             <div class="form-group row">
                                 <label for="inputPassword3" class="col-sm-2 control-label">מספר סט</label>

                                 <div class="col-sm-10">
                                     <input type="text" name="setname"  minlength="2"  class="form-control" id="inputPhone" placeholder="אנא הזן דגם פריט">
                                 </div>
                             </div>
                             <div class="form-group row">
                                 <label for="inputPassword3" class="col-sm-2 control-label">תמונת פריט</label>

                                 <input type="file" id="file" name="file" />
                                 <p class="help-block text-red">בחר תמונת פריט</p>
                             </div>


                             <div class="form-group row">
                                 <label for="inputPassword3" class="col-sm-2 control-label">סטטוס ציוד</label>
                                 <div class="form-group">

                                     <select class="form-control select2" name="itemstat" style="width: 100%;">
                                         <option disabled selected="selected"> אנא בחר מצב סטטוס</option>
                                         <option value="0">תקין</option>
                                         <option value="1">שמור</option>
                                         <option value="2">תקול</option>
                                         <option value="3">לא נמצא</option>
                                         <option value="4">אחר</option>
                                     </select>
                                 </div>
                                 <br/>
                             </div>


                             <div class="form-group row">
                                 <div class="col-md-10"></div>
                                 <input type="submit" name="submit" id="sb" value="הוסף פריט" class="btn btn-info pull-left">
                             </div>
                         </div>


                     </form>
                     <div class="row">
                         <div class="col-md-6">
                             <div class="result"></div>
                         </div>
                     </div>

                 </div>
             </div>
         </div>




 </div>


    </section>

  </div>


	

</body>
</html>

这是php文件

<?php
require_once 'app/helpers.php';
session_start();
$error = '';
$link = mysqli_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PWD, MYSQL_DB);
mysqli_set_charset($link,"utf8");

if($_POST){

    if(isset($_POST['itemtype'])){
        $itemtype = $_POST['itemtype'];
    }
    $display = $_POST['itemdisplay'];
    $brand = $_POST['brand'];
    $model = $_POST['model'];
    $spec = $_POST['spec'];
    $sn = $_POST['sn'];

    $setname = $_POST['setname'];
    if(isset($_POST['itemstat'])){
        $itemstat = $_POST['itemstat'];
    }


    if(empty($itemtype)){
        $error = '<div class="alert alert-danger alert-dismissable">
					<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> תכניס את הפריט לקבוצה לא יפה! </div>';
    }elseif (empty($display)){
        $error = '<div class="alert alert-danger alert-dismissable">
					<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> אם לא נציג ניתן לו שם איך יקחו אותו? </div>';
    }elseif (empty($brand)){
        $error = '<div class="alert alert-danger alert-dismissable">
					<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> סליחה... מי יצר את הפריט? </div>';
    }elseif (empty($model)){
        $error = '<div class="alert alert-danger alert-dismissable">
					<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> רגע...איזה דגם זה? </div>';
    }elseif (empty($spec)){
        $error = '<div class="alert alert-danger alert-dismissable">
					<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> לא מגיע שתכתוב עליו כמה מילים? </div>';
    }elseif (empty($sn)){
        $error = '<div class="alert alert-danger alert-dismissable">
					<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> מספר סידורי זה הכי אחי (ושלא יהיה אותו דבר כמו של פריט אחר...לא נעים..) </div>';
    }elseif (empty($setname)){
        $error = '<div class="alert alert-danger alert-dismissable">
					<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>  אני חייב להיות בזוגיות...מה שם הסט שלי? </div>';
    }elseif(empty($itemstat)){
        $error = '<div class="alert alert-danger alert-dismissable">
					<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>    לאחרונה סיימתי קשר רציני... מה הסטטוס שלי? </div>';
    }else{

        $sql = "INSERT INTO item (item_desc,display,brand,model,spec,sn,set_name,status,item_pic) VALUES ('$itemtype','$display','$brand','$model','$spec','$sn','$setname','$itemstat','$filename')";
        mysqli_query($link,$sql);
        $error = '<div class="alert alert-success alert-dismissable">
					<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>    יש לנו פריט חדש! </div>';


}
}
?>


<div>

    <?= $error ?>

</div>

我知道这个答案对于大多数人来说很容易...我尝试过卑鄙的解决方案,但没有成功...这是我现在拥有的代码,请您帮我弄清楚如何做到这一点。 我在较旧的帖子中寻找答案,但是我没有让它起作用...

1 个答案:

答案 0 :(得分:0)

请尝试这个

$(document).on('submit', '#newitem', function (e) {
  e.preventDefault();
  var form_data = new FormData($(this));

        $.ajax({
            type: 'POST',
            url: 'iteminsert.php',
            data: form_data,
            processData: false,
            contentType: false,
            async: false,
            cache: false,
            success:(function (data){
                       $(".result").html(data);
                })
        });

  return false;
});