我已经有运行良好的图像上传代码，它只有一个图像上传选项。
在这里，图像被发送到它将上传并返回图像src代码和图像路径的函数，一旦返回，它将在$('#image').html(data);处填充
当我有一个选项时，它工作得很好，而我有两个上传失败，
我面临的错误是它适用于第一个
<input type="file" id="image" name="image" class="upload-img" style="opacity:0">
当我尝试第二个
<input type="file" id="imagetwo" name="imagetwo" class="upload-img" style="opacity:0">
它替换了第一个输入类型的图像，
我在第一个函数中有$('#image').html(data);，在第二个函数中有$('#imagetwo').html(data);
我正在使用$("form#data").submit(function(){}
这是 HTML ：
<input type="file" id="image" name="image" class="upload-img" style="opacity:0">
<input type="hidden" class="imagetextbox" name="imagetextbox"/>
这是脚本：
<script>
$(document).ready(function()
{
$("form#data").submit(function(){
var formData = new FormData($(this)[0]);
$.ajax({
url: 'globalimageupload',
type: 'POST',
data: formData,
async: true,
success: function (data)
{
$('#image').html(data);
console.log(data);
},
cache: false,
contentType: false,
processData: false
});
return false;
});
$("input[type='file']").on("change", function()
{
$("form#data").submit();
});
});
</script>
这是图像句柄功能：
public function globalimageupload()
{
$file = Input::file('image');
if (Input::file('image'))
{
$valid_exts = array('jpeg', 'jpg', 'png', 'gif'); // valid extensions
$max_size = 2000 * 1024; // max file size (200kb)
$ext = $file->guessClientExtension();
$size = $file->getClientSize();
if (in_array($ext, $valid_exts) AND $size < $max_size)
{
$image=Input::file('image');
$destinationPath = public_path()."/assets/uploads/companylogo/";
$num_unique = md5(uniqid() . time());
$fileName=$num_unique.'.'.$ext;
Input::file('image')->move($destinationPath,$fileName);
$desPathimg=public_path()."assets/uploads/companylogo/".$fileName;
$desPath=$fileName;
return HTML::image('assets/uploads/companylogo/'.$fileName,'photo', array( 'width' => 128, 'id'=> 'po', 'name'=> 'po', 'height' => 128 )).'<input type="hidden" name="imagetextbox" id="imagetextbox" value="'.$desPath.'">';
}
else
{
return 'Check the Extension and file size';
}
}
else
{
return "Please upload any Image";
}
}
正在犯什么错误，我该如何解决这个问题？
在绑定提交事件之前使用取消绑定函数，如下所示：
$("input[type='file']").on("change", function(){
$("form#data").unbind('submit');
$("form#data").submit();
});
当您一次又一次地绑定事件（即此处为提交）时发生。在页面加载中，您已经绑定了提交事件，再次在输入更改事件上绑定了相同的内容，因此代码将执行两次并上传文件两次。