使用 php 和 ajax 调用在表单提交上上传单张图片
Posted
技术标签:
【中文标题】使用 php 和 ajax 调用在表单提交上上传单张图片【英文标题】：Single image upload on form submit using php and ajax call 【发布时间】：2019-05-05 20:54:27 【问题描述】：我有这个带有 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>我知道这个答案对你们大多数人来说一定很容易......我尝试了卑鄙的解决方案但没有成功......这是我现在拥有的代码，请你帮我弄清楚如何做到这一点。 我在较旧的帖子中寻找答案，但我没有设法让它发挥作用......
【问题讨论】：
How to upload a file using Ajax on POST?的可能重复 副本解释了如何使用 Ajax 和 jQuery 上传文件。当您开始工作时，您还需要在 PHP 中处理上传的文件（我在问题中没有看到任何代码）。有很多指南解释了如何在 PHP 中处理上传。 您也对 SQL 注入攻击持开放态度。考虑使用准备好的语句，而不是使用未转义（不安全）的用户数据手动构建查询。 【参考方案1】：请试试这个
$(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;
);
【讨论】：
当我尝试这段代码时，我的表单验证不起作用，所以上传 能否请您替换data:form_data以上是关于使用 php 和 ajax 调用在表单提交上上传单张图片的主要内容，如果未能解决你的问题，请参考以下文章