正在为一家房地产代理商开发一个网站。我有一个用于提交属性详细信息的html表单，有多个表单输入，并且我还需要使用Dropzone JS多个图像上传功能上传多个属性图像。
在这里，我正在使用jQuery验证库来验证表单输入。验证工作完美，数据被发布到名为Submit_property_data.php的php文件中。但是当我实现Dropzone JS图像上传时，它不起作用。
property-submit.js
$('document').ready(function() {
$("#notification-property").hide();
/* handling form validation */
$("#property-form").validate({
rules: {
prop_title: "required",
prop_price: {
required: true,
digits: true
},
prop_area: {
required: true,
digits: true
},
prop_address: "required",
prop_message: {
required: true,
minlength: 10,
maxlength: 2000
},
prop_owner_name: "required",
prop_owner_email: {
required: true,
email: true
},
prop_owner_phone: {
required: true,
digits: true
},
},
messages: {
'prop_title': {
required: "Please enter title for your property"
},
prop_price: {
required: "Please enter price of your property",
digits: "Please enter price in digits (AED)"
},
prop_area: "Please enter Sqft of your property",
prop_address: "Please enter address of your property",
prop_message: {
required: "Please enter detailed Information",
minlength: "Please enter something about your property in 50 - 20000 characters",
maxlength: "Please enter something about your property in 50 - 20000 characters"
},
prop_owner_name: "Please enter your name",
prop_owner_email: {
required: "Please enter your email address",
email: "Please enter valid email address"
},
prop_owner_phone: {
required: "Please enter your phone number",
digits: "Please enter valid phone number"
},
},
submitHandler: submitPropertyForm
});
/* Handling login functionality */
function submitPropertyForm() {
var data = $("#property-form").serialize();
$.ajax({
type: 'POST',
url: 'submit_property_data.php',
data: data,
beforeSend: function() {
$("#submit-button").html('<span class="glyphicon glyphicon-transfer"></span> Submiting ...');
},
success: function(response) {
if (response == "ok") {
console.log(1);
document.getElementById("property-form").reset();
$("#notification-property").html('<b> ' + response + ' !</b>').show();
//setTimeout(' window.location.href = "dashboard.php"; ',4000);
} else {
$("#notification-property").fadeIn(1000, function() {
$("#notification-property").html('<b>' + response + ' !</b>').fadeOut();
$("#submit-button").html(' Send');
});
}
},
complete:function(){
$('body, html').animate({scrollTop:$('form').offset().top}, 'slow');
}
});
return false;
}
$("#submit-button").bind('click', function() {
if ( $("#property-form").valid() ) {
submitPropertyForm();
} else {
console.log('form invalid');
}
})
Dropzone.autoDiscover = false;
$(function () {
$("div#myDropzone").dropzone({
url: 'submit_property_data.php',
addRemoveLinks: true,
maxFiles:11,
uploadMultiple: true,
autoProcessQueue: false,
parallelUploads: 10,
init: function () {
var myDropzone = this;
// Update selector to match your button
$("#submit-button").click(function (e) {
e.preventDefault();
myDropzone.processQueue();
});
this.on('sending', function(file, xhr, formData) {
// Append all form inputs to the formData Dropzone will POST
var data = $('#property-form').serializeArray();
$.each(data, function(key, el) {
formData.append(el.name, el.value);
});
});
this.on("success", function(file, responseText) {
alert(responseText);
});
},
});
});
});
HTML文件（submit_property.php）
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
!-- Submit Property start -->
<div class="content-area-7 submit-property">
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- <div id="error_message" class="notification-box"></div> -->
</div>
<div id="notification-property" class="notification-box">sd</div>
<div class="col-md-12">
<div class="submit-address">
<form name = "property-form" method="post" id="property-form">
<div class="main-title-2">
<h1><span>Tell Me</span> Something About Your Property</h1>
</div>
<div class="search-contents-sidebar mb-30">
<div class="form-group">
<label>Property Title</label>
<input class="input-text" name="prop_title" id="prop_title" placeholder="Property Title">
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Status</label>
<select class="selectpicker search-fields" id="prop_status" name="prop_status">
<option value="Sale">For Sale</option>
<option value="Rent">For Rent</option>
</select>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Type</label>
<select class="selectpicker search-fields" id="prop_title" name="prop_type">
<option value="Modern">Modern</option>
<option value="Traditional">Traditional</option>
<option value="Arabic">Arabic</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="form-group">
<label>Price (Dirham)</label>
<input class="input-text" name="prop_price" id="prop_price" placeholder="AED">
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="form-group">
<label>Sqft</label>
<input class="input-text" name="prop_area" id="prop_area" placeholder="SqFt">
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="form-group">
<label>Bed Rooms</label>
<select class="selectpicker search-fields" name="prop_rooms" id="prop_rooms">
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
<!-- <div class="col-md-3 col-sm-6">
<div class="form-group">
<label>Bathroom</label>
<select class="selectpicker search-fields" name="1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</div>
</div> -->
</div>
</div>
<div class="main-title-2">
<h1><span>Location</span></h1>
</div>
<div class="row mb-30 ">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label>Address</label>
<input class="input-text" id="prop_address" name="prop_address" placeholder="Address">
</div>
</div>
</div>
<div class="main-title-2">
<h1><span>Upload</span> Photos Of Villa </h1>
</div>
<div id="myDropzone" class="dropzone dropzone-design mb-10">
<div class="dz-default dz-message" data=""><span>Drop files here to upload</span></div>
</div>
<div class="main-title-2">
<h1><span>Detailed</span> Information</h1>
</div>
<div class="row mb-30">
<div class="col-md-12">
<div class="form-group">
<textarea class="input-text" id="prop_message" name="prop_message" placeholder="Detailed Information"></textarea>
</div>
</div>
</div>
<!--<div class="row mb-30">
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Building Age <span>(optional)</span></label>
<select class="selectpicker search-fields" name="years">
<option>0-1 Years</option>
<option>0-5 Years</option>
<option>0-10 Years</option>
<option>0-20 Years</option>
<option>0-40 Years</option>
<option>40+Years</option>
</select>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Bedrooms (optional)</label>
<select class="selectpicker search-fields" name="1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Bathrooms (optional)</label>
<select class="selectpicker search-fields" name="1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</div>
</div>
<div class="col-lg-12">
<label class="margin-t-10">Features (optional)</label>
<div class="row">
<div class="col-lg-4 col-sm-4 col-xs-12">
<div class="checkbox checkbox-theme checkbox-circle">
<input id="opt_parking" name="opt_parking" value="1" type="checkbox">
<label for="checkbox1">
Free Parking
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="opt_air_condition" name="opt_air_condition" value="1" type="checkbox">
<label for="checkbox2">
Air Condition
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="opt_seat" name="opt_seat" value="1" type="checkbox">
<label for="checkbox3">
Places to seat
</label>
</div>
</div>
<div class="col-lg-4 col-sm-4 col-xs-12">
<div class="checkbox checkbox-theme checkbox-circle">
<input id="opt_swimming" name="opt_swimming" value="1" type="checkbox">
<label for="checkbox4">
Swimming Pool
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="opt_laundary" name="opt_laundary" value="1" type="checkbox">
<label for="checkbox5">
Laundry Room
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="opt_window_covering" name="opt_window_covering" value="1" type="checkbox">
<label for="checkbox6">
Window Covering
</label>
</div>
</div>
<div class="col-lg-4 col-sm-4 col-xs-12">
<div class="checkbox checkbox-theme checkbox-circle">
<input id="opt_parking" name="opt_parking" value="1" type="checkbox">
<label for="checkbox7">
Central Heating
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox8" type="checkbox">
<label for="checkbox8">
Alarm
</label>
</div>
</div>
</div>
</div>
</div>-->
<div class="main-title-2">
<h1><span>Contact</span> Details</h1>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Name</label>
<input class="input-text" name="prop_owner_name" id="prop_owner_name" placeholder="Name">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Email</label>
<input class="input-text" name="prop_owner_email" id="prop_owner_email" placeholder="Email">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label>Contact No</label>
<input class="input-text" name="prop_owner_phone" id="prop_owner_phone" placeholder="Phone">
</div>
</div>
</div>
<div class="col-md-12">
<button type="button" name="submit-button" id="submit-button">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="property-submit.js"></script>
<script src="js/dropzone.js"></script>
</html>
PHP文件（submit_property_data.php）
<?php
echo "ok";
require_once("functions.php");
$ds = DIRECTORY_SEPARATOR; //1
$storeFolder = 'villas-images';
$encpt_data = rand(1000,5000);
if (!empty($_FILES)) {
$tempFile = $_FILES['file']['tmp_name']; //3
$targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds; //4
$targetFile = $targetPath.$_FILES['file']['name']; //5
if(move_uploaded_file($tempFile,$targetFile))
{
echo '<b>Success</b>';
}
}
?>
dropzone无法使用该表单
我实际上需要什么？
我需要先验证表单输入并在表单有效后上载图像，还需要将所有输入发布到我的名为Submit_property_data.php的php文件中
我还需要将图像输入存储到数据库中。
答案 0 :(得分：0)
Dropzone需要action属性，您必须将该属性包括在<div id="myDropzone" class="dropzone dropzone-design mb-10">中，仅当将给定文件重定向到特定页面时，该属性才起作用。
但是由于<div>标签没有响应action属性，因此请为上述所有过程都使用form标签。