提交时根本不执行任何操作。
Q2。我还希望在选择文件时不等待提交时在更改时触发该函数。
这里是JS。 >和带有php的HTMl。
$('#imageUploadForm').on('submit',(function(e) {
e.preventDefault()
$.ajax({
type:'POST',
url: $(this).attr('action'),
data:$(this).serialize(),
cache:false
});
}));
#1 楼
首先在您的Ajax调用中包含成功与错误功能,然后检查它是否给您错误或什么提示?您的代码应像这样
$(document).ready(function (e) {
$('#imageUploadForm').on('submit',(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
type:'POST',
url: $(this).attr('action'),
data:formData,
cache:false,
contentType: false,
processData: false,
success:function(data){
console.log("success");
console.log(data);
},
error: function(data){
console.log("error");
console.log(data);
}
});
}));
$("#ImageBrowse").on("change", function() {
$("#imageUploadForm").submit();
});
});
评论
这不会将输入文件发送到PHP文件。我正在尝试使用console.log打印文件的名称或类型,但没有任何数据。
–里卡多·贡萨雷斯(RicardoGonzales)
14年2月18日在14:34
似乎不使用'processData:false'就以这种方式发送'formData'变量是错误的,因为jQuery处理'data'并将其转换为字符串。如果您运行该代码,将会得到一个错误。仍然不能解决将文件放入php文件的问题。我已经找到了“ jquery.form.min.js”库来处理对表单提交过程的这种输入。在这种情况下,您应该使用$(imageUploadForm')。ajaxSubmit();
–里卡多·贡萨雷斯(RicardoGonzales)
2014-02-19 15:24
是的,真的很抱歉,我忘了提及这一点。现在检查我的答案。
–索希尔·德赛(Sohil Desai)
2014年2月20日下午4:24
@ Jek-fdrv:据我说它应该可以在IE9上工作,但是我没有在IE9上进行过测试,因为我使用的是Linux,所以没有IE。您在IE9中遇到什么错误?
–索希尔·德赛(Sohil Desai)
2014年8月18日在11:20
但是页面仍然刷新
– Kashyap Patel
2015年4月21日在7:27
#2 楼
HTML代码<div class="rCol">
<div id ="prv" style="height:auto; width:auto; float:left; margin-bottom: 28px; margin-left: 200px;"></div>
</div>
<div class="rCol" style="clear:both;">
<label > Upload Photo : </label>
<input type="file" id="file" name='file' onChange=" return submitForm();">
<input type="hidden" id="filecount" value='0'>
这里是Ajax代码:
function submitForm() {
var fcnt = $('#filecount').val();
var fname = $('#filename').val();
var imgclean = $('#file');
if(fcnt<=5)
{
data = new FormData();
data.append('file', $('#file')[0].files[0]);
var imgname = $('input[type=file]').val();
var size = $('#file')[0].files[0].size;
var ext = imgname.substr( (imgname.lastIndexOf('.') +1) );
if(ext=='jpg' || ext=='jpeg' || ext=='png' || ext=='gif' || ext=='PNG' || ext=='JPG' || ext=='JPEG')
{
if(size<=1000000)
{
$.ajax({
url: "<?php echo base_url() ?>/upload.php",
type: "POST",
data: data,
enctype: 'multipart/form-data',
processData: false, // tell jQuery not to process the data
contentType: false // tell jQuery not to set contentType
}).done(function(data) {
if(data!='FILE_SIZE_ERROR' || data!='FILE_TYPE_ERROR' )
{
fcnt = parseInt(fcnt)+1;
$('#filecount').val(fcnt);
var img = '<div class="dialog" id ="img_'+fcnt+'" ><img src="<?php echo base_url() ?>/local_cdn/'+data+'"><a href="#" id="rmv_'+fcnt+'" onclick="return removeit('+fcnt+')" class="close-classic"></a></div><input type="hidden" id="name_'+fcnt+'" value="'+data+'">';
$('#prv').append(img);
if(fname!=='')
{
fname = fname+','+data;
}else
{
fname = data;
}
$('#filename').val(fname);
imgclean.replaceWith( imgclean = imgclean.clone( true ) );
}
else
{
imgclean.replaceWith( imgclean = imgclean.clone( true ) );
alert('SORRY SIZE AND TYPE ISSUE');
}
});
return false;
}//end size
else
{
imgclean.replaceWith( imgclean = imgclean.clone( true ) );//Its for reset the value of file type
alert('Sorry File size exceeding from 1 Mb');
}
}//end FILETYPE
else
{
imgclean.replaceWith( imgclean = imgclean.clone( true ) );
alert('Sorry Only you can uplaod JPEG|JPG|PNG|GIF file type ');
}
}//end filecount
else
{ imgclean.replaceWith( imgclean = imgclean.clone( true ) );
alert('You Can not Upload more than 6 Photos');
}
}
这里是PHP代码:
$filetype = array('jpeg','jpg','png','gif','PNG','JPEG','JPG');
foreach ($_FILES as $key )
{
$name =time().$key['name'];
$path='local_cdn/'.$name;
$file_ext = pathinfo($name, PATHINFO_EXTENSION);
if(in_array(strtolower($file_ext), $filetype))
{
if($key['name']<1000000)
{
@move_uploaded_file($key['tmp_name'],$path);
echo $name;
}
else
{
echo "FILE_SIZE_ERROR";
}
}
else
{
echo "FILE_TYPE_ERROR";
}// Its simple code.Its not with proper validation.
这里完成了上传和预览的部分。现在,如果您想同时删除页面和文件夹中的图像,则可以在此处删除代码。
Ajax的部分:
function removeit (arg) {
var id = arg;
// GET FILE VALUE
var fname = $('#filename').val();
var fcnt = $('#filecount').val();
// GET FILE VALUE
$('#img_'+id).remove();
$('#rmv_'+id).remove();
$('#img_'+id).css('display','none');
var dname = $('#name_'+id).val();
fcnt = parseInt(fcnt)-1;
$('#filecount').val(fcnt);
var fname = fname.replace(dname, "");
var fname = fname.replace(",,", "");
$('#filename').val(fname);
$.ajax({
url: 'delete.php',
type: 'POST',
data:{'name':dname},
success:function(a){
console.log(a);
}
});
}
这是PHP部件(delete.php):
$path='local_cdn/'.$_POST['name'];
if(@unlink($path))
{
echo "Success";
}
else
{
echo "Failed";
}
#3 楼
您可以使用jquery.form.js插件通过ajax将图像上传到服务器。http://malsup.com/jquery/form/
这里是示例jQuery ajax图像上传脚本
(function() {
$('form').ajaxForm({
beforeSubmit: function() {
//do validation here
},
beforeSend:function(){
$('#loader').show();
$('#image_upload').hide();
},
success: function(msg) {
///on success do some here
}
}); })();
如果有任何疑问,请在此处参考以下ajax图像上传教程
http:// www。 smarttutorials.net/ajax-image-upload-using-jquery-php-mysql/
#4 楼
这是使用HTML5和jQuery的简单方法:1)包含两个JS文件
<script src="jslibs/jquery.js" type="text/javascript"></script>
<script src="jslibs/ajaxupload-min.js" type="text/javascript"></script>
2)包含具有漂亮按钮的CSS
<link rel="stylesheet" href="css/baseTheme/style.css" type="text/css" media="all" />
3)创建DIV或SPAN
<div class="demo" > </div>
4)在您的HTML页面中编写此代码
$('.demo').ajaxupload({
url:'upload.php'
});
5)创建您的upload.php文件,以使用PHP代码上传数据。
您可以从此处下载所需的JS文件
这是示例
它太酷,太快而且太容易了! :)
评论
您可能需要使用FormData()通过ajax发送图像。 stackoverflow.com/a/8244082/2220391如果需要,我将上传此表单正在使用的php文件。
这不是PHP代码。您需要将文件追加到FormData()以便使用ajax发送它们
此链接可能会帮助您完成使用ajaxform的匹配。.stackoverflow.com/questions/19221647/…
您不能仅使用Ajax上传文件。