Ajax 上传图片
Posted
技术标签:
【中文标题】Ajax 上传图片【英文标题】：Ajax Upload image 【发布时间】：2013-10-27 03:58:46 【问题描述】：Q.1 我想将此表单转换为 ajax，但我的 ajax 代码似乎缺少一些东西。 提交时根本不做任何事情。
第二季度。我还希望在选择文件不等待提交时触发更改。
这里是 JS。
$('#imageUploadForm').on('submit',(function(e)
e.preventDefault()
$.ajax(
type:'POST',
url: $(this).attr('action'),
data:$(this).serialize(),
cache:false
);
));
<form name="photo" id="imageUploadForm" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
<input type="file" style="widows:0; height:0" id="ImageBrowse" hidden="hidden" name="image" size="30"/>
<input type="submit" name="upload" value="Upload" />
<img style="border:#000; z-index:1;position: relative; border-width:2px; float:left" src="<?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?>" id="thumbnail"/>
</form>
【问题讨论】：
您可能需要使用FormData() 发送带有ajax 的图像。 ***.com/a/8244082/2220391
如果需要，我会加载此表单正在使用的 php 文件。
这不是PHP 代码。您需要将文件附加到 FormData() 以便使用 ajax 发送它们
此链接可能会帮助您使用 ajaxform 完成。***.com/questions/19221647/…
不能单独使用ajax上传文件。
【参考方案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 打印文件的名称或类型，但没有收到任何数据。 似乎在不使用 'processData: false' 的情况下以这种方式发送 'formData' 变量是错误的，因为 jQuery 处理 'data' 将其转换为字符串。如果你运行该代码，你会得到一个错误。这仍然不能解决将文件放入 php 文件的问题。我找到了“jquery.form.min.js”库来处理表单提交过程中的这种输入。在这种情况下，您应该使用 $(imageUploadForm').ajaxSubmit(); 是的，这是真的，对不起，我忘了提。现在检查我的答案。 @Jek-fdrv：根据我的说法，它应该可以在 IE9 上运行，但我没有在 IE9 上测试过，因为我使用的是 linux，所以没有 IE。你在 IE9 中遇到了什么错误？ 但页面仍在刷新【参考方案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】：Image upload using ajax and check image format and upload max size
<form class='form-horizontal' method="POST" id='document_form' enctype="multipart/form-data">
<div class='optionBox1'>
<div class='row inviteInputWrap1 block1'>
<div class='col-3'>
<label class='col-form-label'>Name</label>
<input type='text' class='form-control form-control-sm' name='name[]' id='name' Value=''>
</div>
<div class='col-3'>
<label class='col-form-label'>File</label>
<input type='file' class='form-control form-control-sm' name='file[]' id='file' Value=''>
</div>
<div class='col-3'>
<span class='deleteInviteWrap1 remove1 d-none'>
<i class='fas fa-trash'></i>
</span>
</div>
</div>
<div class='row'>
<div class='col-8 pl-3 pb-4 mt-4'>
<span class='btn btn-info add1 pr-3'>+ Add More</span>
<button class='btn btn-primary'>Submit</button>
</div>
</div>
</div>
</form>
</div>
$.validator.setDefaults(
submitHandler: function (form)
$.ajax(
url : "action1.php",
type : "POST",
data : new FormData(form),
mimeType: "multipart/form-data",
contentType: false,
cache: false,
dataType:'json',
processData: false,
success: function(data)
if(data.status =='success')
swal("Document has been successfully uploaded!",
icon: "success",
);
setTimeout(function()
window.location.reload();
,1200);
else
swal('Oh noes!', "Error in document upload. Please contact to administrator", "error");
,
error:function(data)
swal ( "Ops!" , "error in document upload." , "error" );
);
);
$('#document_form').validate(
rules:
"name[]":
required: true
,
"file[]":
required: true,
extension: "jpg,jpeg,png,pdf,doc",
filesize :2000000
,
messages:
"name[]":
required: "Please enter name"
,
"file[]":
required: "Please enter file",
extension :'Please upload only jpg,jpeg,png,pdf,doc'
,
errorElement: 'span',
errorPlacement: function (error, element)
error.addClass('invalid-feedback');
element.closest('.col-3').append(error);
,
highlight: function (element, errorClass, validClass)
$(element).addClass('is-invalid');
,
unhighlight: function (element, errorClass, validClass)
$(element).removeClass('is-invalid');
);
$.validator.addMethod('filesize', function(value, element, param)
return this.optional(element) || (element.files[0].size <= param)
, 'File size must be less than 2 MB');
【讨论】：
【参考方案5】：这是使用 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 代码上传数据。
您可以从here下载所需的JS文件 这里是Example
它太酷太快而且太容易了！ :)
【讨论】：
引用库的链接不再起作用。以上是关于Ajax 上传图片的主要内容，如果未能解决你的问题，请参考以下文章
使用ajax上传图片，支持图片即时浏览，支持js图片压缩后上传给服务器