Php 将表单提交到不同的操作页面jquery
嗯，我无法多次发送表单。AjaxForm代码的初始部分工作正常，而FormData不工作。相反，它在url中发送数据，而不使用类似 index.php？照片[]=&username=dfdfdf。前一部分用于图像存储，第二部分用于用户数据存储。我的要求是使用单个表单将数据发送到数据库中的不同表。当用户单击submit时，数据存储在数据表中，上传的图像也会使用该用户ID进行更新。 希望你能解决这个问题Php 将表单提交到不同的操作页面jquery,php,jquery,ajax,forms,ajaxform,Php,Jquery,Ajax,Forms,Ajaxform,嗯，我无法多次发送表单。AjaxForm代码的初始部分工作正常，而FormData不工作。相反，它在url中发送数据，而不使用类似 index.php？照片[]=&username=dfdfdf。前一部分用于图像存储，第二部分用于用户数据存储。我的要求是使用单个表单将数据发送到数据库中的不同表。当用户单击submit时，数据存储在数据表中，上传的图像也会使用该用户ID进行更新。 希望你能解决这个问题 <?php session_start(); include("db.php"); $s
<?php
session_start();
include("db.php");
$str = "select * from fileupload order by id DESC";
$res = mysql_query($str);
?>
<!DOCTYPE html>
<html>
<head>
<title>Upload</title>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.wallform.js"></script>
<script>
$(document).ready(function() {
$('#photoimg').die('click').live('change', function() {
$("#imageform").ajaxForm({
url : 'ajaxImageUpload.php',
target: '#preview',
beforeSubmit:function(){
console.log('ttest');
$("#imageloadstatus").show();
$("#imageloadbutton").hide();
},
success:function(){
console.log('test');
$("#imageloadstatus").hide();
$("#imageloadbutton").show();
},
error:function(){
console.log('xtest');
$("#imageloadstatus").hide();
$("#imageloadbutton").show();
} }).submit();
});
$(".del-pic").live("click", function(){
var sel1 = $(this).closest('.imgList');
var del_id = $(this).attr('id');
$.post("deleteimage.php", {
del_id : del_id
},
function(data, txtStatus) {
sel1.fadeOut('slow', function()
{
sel1.remove();
});
});
});
$("#uploadTrigger").click(function(){
$("#photoimg").click();
});
$("#upbutton").live("click", function(){
$("#imageform").bind('submit',function(e){
if(window.FormData !== undefined) // for HTML5 browsers
{
var formdata = new FormData(this);
$.post({
url : "insertuser.php",
type : "POST",
data : formdata,
mimeType : "multipart/form-data",
contentType : false,
cache : false,
processData: false,
success: function(data, txtstatus, jqXHR)
{
alert('success');
},
error: function(data, txtstatus, errorthrown)
{
alert('error');
}
});
}
else
{
alert('HTML5 not supporting in your browser');
}
});
});
});
</script>
<style>
#preview
{
color:#cc0000;
font-size:12px;
background: #066;
}
.imgList
{
max-height:100px;
margin-left:10px;
border:1px solid #dedede;
padding:4px;
float:left;
}
.hidden
{
display: none;
}
#uploadTrigger
{
cursor: pointer;
border: 1px solid #333;
padding: 10px;
margin: 5px 5px 5px 5px;
background: #777;
color: #fff;
width:75px;
border-radius: 20px;
font-family:arial;
}
.del-pic
{
background-image:url(../../Krishna/images2/closebox.png);
width:30px;
height:30px;
display:block;
position: absolute;
margin:-10px 0 0 85px;
}
</style>
</head>
<body>
<div>
<div id='preview' style="">
<?
while($row = mysql_fetch_array($res))
{
echo "<div class='imgList'><div class='del-pic' id='".$row['id']."'></div><img src='".$row['filename']."' width='100px' height='100px' ></div>";
}
?>
</div>
<form id="imageform" name="imageform" enctype="multipart/form-data" style="clear:both">
<div id='imageloadstatus' style='display:none'><img src="loader.gif" alt="Uploading...."/></div>
<div id='imageloadbutton'>
<div id="uploadTrigger">Add Photo</div>
<input type="file" name="photos[]" id="photoimg" class="hidden" multiple="true" />
<input name="username" type="text" id="username" />
<input type="submit" value="Upload" id="upbutton" />
</div>
</form>
</div>
</body>
</html>
上传
$（文档）.ready（函数（）{
$（'#photoimg'）.die（'click'）.live（'change'，function（）{
$（“#imageform”）.ajaxForm({
url:'ajaxImageUpload.php'，
目标：“#预览”，
beforeSubmit:函数（）{
console.log（'ttest'）；
$（“#imageloadstatus”）.show（）；
$（“#imageloadbutton”）.hide（）；
},
成功：函数（）{
console.log（'test'）；
$（“#imageloadstatus”）.hide（）；
$（“#imageloadbutton”）.show（）；
},
错误：函数（）{
console.log（'xtest'）；
$（“#imageloadstatus”）.hide（）；
$（“#imageloadbutton”）.show（）；
}}）提交（）；
});
$（“.del pic”）.live（“单击”，函数（）{
var sel1=$（this）.closest（'.imgList'）；
var del_id=$（this.attr（'id'）；
$.post（“deleteimage.php”{
del_id:del_id
},
功能（数据、TXT状态）{
sel1.淡出（'slow'，function（）
{
sel1.删除（）；
});
});
});
$（“#uploadTrigger”）。单击（函数（）{
$（“#photoimg”）。单击（）；
});
$（“#向上按钮”）.live（“单击”，函数（）{
$（“#imageform”）.bind（'submit'，函数（e）{
如果（window.FormData！==未定义）//用于HTML5浏览器
{
var formdata=新formdata（本）；
美元邮政({
url:“insertuser.php”，
类型：“POST”，
数据：formdata，
mimeType：“多部分/表单数据”，
contentType:false，
cache:false，
processData:false，
成功：函数（数据、txtstatus、jqXHR）
{
警惕（“成功”）；
},
错误：函数（数据、txtstatus、错误抛出）
{
警报（“错误”）；
}
});
}
其他的
{
警报（“浏览器中不支持HTML5”）；
}
});
});
});
#预演
{
颜色：#cc0000；
字体大小：12px；
背景:#066；
}
伊姆格利特先生
{
最大高度：100px；
左边距：10px；
边框：1px实心#dedede；
填充：4px；
浮动：左；
}
.隐藏
{
显示：无；
}
#上传触发器
{
光标：指针；
边框：1px实心#333；
填充：10px；
保证金：5px 5px 5px 5px；
背景：#777；
颜色：#fff；
宽度：75px；
边界半径：20px；
字体系列：arial；
}
德尔皮克先生
{
背景图像：url（../../Krishna/images2/closebox.png）；
宽度：30px；
高度：30px；
显示：块；
位置：绝对位置；
利润率：-10px085px；
}
不要使用.live
和.die
，它们在jQuery 1.7中被弃用，在1.9中被删除。使用.on
和.off
。感谢Barmar的评论！我意识到了这一点，但我仍然在谈论FormData。您正在创建FormData
对象，但从未向其添加任何内容。将一个事件处理程序绑定到另一个事件处理程序中几乎是不正确的。#imageform submit
处理程序不应位于#upbutton click
处理程序内。您能解释一下吗？我是新手！！，我已经使用了它，所以它附加了所有的形式元素！