文件上传获胜't触发以下循环(第一个循环除外)
File Upload won't trigger on the following loop except the first one
我正在为我的Web应用程序使用Twitter模式引导。该应用程序的一个功能是显示一个包含相应信息的表(我使用mysql_query填充信息)。对于表格的每一行,都有一个"查看"按钮。单击"查看"按钮将打开一个"模式"弹出窗口,其中包含一个表单。正如你所看到的,我正在尝试使用AJAX上传一个文件。当我试着在第一排做这件事时,这件事就成功了。但是,当我尝试在下面一行进行操作时,我无法上传文件,就好像文件中没有表单一样
表:
<table border = '1' width = "30%">
<tr>
<th>Asset Picture</th>
<th>Asset Name</th>
<th>Action</th>
</tr>
<?php
$data=mysql_query("SELECT * FROM assets") or die("No records found.".mysql_error());
while($row = mysql_fetch_array($data))
{
echo "<tr>
<td><img src = '$row[asset_Picture]' width = '100%'></td>
<td>$row[asset_Name]></td>
<td><button data-toggle='modal' id = 'buttonView' style = '$row[asset_ID]' data-target='#myModalEdit-$row['asset_ID']' type='button' class='btn btn-link'>View</button></td>
</tr>";
echo "<div class='modal fade' id='myModalEdit-$row['asset_ID']' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>"; ?>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>
<h4 class='modal-title' id='myModalLabel'><b>Testing</b></h4>
</div>
<div class='modal-body'>
<?php
echo "<form style = '$row[asset_ID]' id='uploadForm-$row[asset_ID]' action = 'upload.php' method = 'POST'>
<center><img value = '$row[asset_Picture]' id = asset_Picture-$row[asset_ID]' class = 'img-thumbnail' src = '$row[asset_Picture]' width = '60%'></center><br><br>
<b class = 'text-danger'>Change Asset Picture?</b><br><br>
<input class = 'form-controlModal' type = 'file' name = 'userImage' id = 'file-$row[asset_ID]' accept='image/x-png, image/gif, image/jpeg, image/pjpeg, image/jpg, image/png' style = 'width:460px;'>
<input type='submit' id = 'uploadPicture' style = '$row[asset_ID]' class='btn btn-primary' value = 'Upload'>
</form>";
?>
</div>
<div align = 'left' class='modal-footer'>
<button type='button' class='btn btn-warning' data-dismiss='modal'>Close</button>
</div>
</div>
</div>
</div>
<?php
}
?>
</table>
Javascript:
$('#uploadPicture').click( function(e) {
var edit_id = $(this).attr("style");
$.ajax({
url: "upload.php",
type: "POST",
data: new FormData($("form#uploadForm-"+edit_id)[0]),
contentType: false,
cache: false,
processData:false,
success: function(data)
{
alert("success!");
},
error: function()
{
}
});
e.preventDefault();
});
上传.php
<?php
if(is_array($_FILES)) {
if(is_uploaded_file($_FILES['userImage']['tmp_name'])) {
$sourcePath = $_FILES['userImage']['tmp_name'];
$targetPath = "upload/".$_FILES['userImage']['name'];
if(move_uploaded_file($sourcePath,$targetPath)) {
echo $targetPath;
}
}
}
?>
提前感谢!:)
不要使用'id',而是使用'class'。使用"id",绑定仅适用于第一个元素。偶数只绑定到第一个达到该值的ID。而是使用
<input type='submit' style = '$row[asset_ID]' class='uploadPicture btn btn-primary' value = 'Upload'>
现在修改这个脚本
$('.uploadPicture').click( function(e) { // <-- starting with '.' means for all objects of this class
var edit_id = $(this).attr("style");
$.ajax({
url: "upload.php",
type: "POST",
data: new FormData($("form#uploadForm-"+edit_id)[0]),
contentType: false,
cache: false,
processData:false,
success: function(data)
{
alert("success!");
},
error: function()
{
}
});
e.preventDefault();
});
这就行了。如果你想接受我的建议,那么我会说在"style"属性中使用ID真的是个坏主意。我会说像这个一样使用它
<input type='submit' id = '$row[asset_ID]' class='uploadPicture btn btn-primary' value = 'Upload'>
并像一样在脚本中识别它
$('.uploadPicture').click( function(e) {
var edit_id = $(this).attr("id"); // <------ pick from id
$.ajax({
url: "upload.php",
type: "POST",
data: new FormData($("form#uploadForm-"+edit_id)[0]),
contentType: false,
cache: false,
processData:false,
success: function(data)
{
alert("success!");
},
error: function()
{
}
});
e.preventDefault();
});
不使用$('#uploadPicture').click( function(e) { ...
使用$('#uploadPicture').on('click', function(e) {...
相关文章:
- 而循环只设置php中输入字段中的第一个值
- 错误:$injector:modulerr模块错误(我的第一个SPA应用程序)
- IE11中的第二个调用取消了第一个Fetch API调用
- Javascript XMLHttpRequest——只有第一个POST请求有效
- 使用javascript或angularjs特定过滤器搜索字符串中第一个img标记的json值
- 将OnClick函数设置为<ul>,最后一个ul是擦除第一个ul-s
- RxJS油门行为;立即获取第一个值
- $.每个jquery循环打印一个“;未定义的“;对于getJSON请求后的每个元素,网格数据都会完美地打印出来
- Angular UI网格:如何通过第一个UI网格中的按钮使第二个UI网格可见
- 选择多个实例中的第一个
- 如何在调用下一个请求之前完成第一个Ajax Get请求
- Lodash:返回对象的第一个键,该对象的值(即数组)中有一个给定的元素(即字符串)
- 看起来第一个console.log是'It’不太对
- Javascript 函数在 PHP 中的第一个 while 循环后停止
- V8 GC何时触发其第一个小GC循环(清除)
- jQuery只从循环中获取第一个id值
- 渐明,淡出DIV上循环工作良好-但不显示第一个DIV
- Javascript只从foreach循环中获取第一个id.为什么
- 如何从循环中选择第一个
- 为什么在jQuery中变量只传递for循环的第一个值?