AJAX上传图像

Question

AJAX上传图像

Q.1我想把这个表单转换成Ajax，但是我的Ajax代码似乎缺少一些东西。提交根本不做任何事。

Q2.当文件被选中时，我还希望函数在更改时触发，而不是等待提交。

这是JS。

$('#imageUploadForm').on('submit',(function(e) {
    e.preventDefault()
    $.ajax({
        type:'POST',
        url: $(this).attr('action'),
        data:$(this).serialize(),
        cache:false
    });}));

和带有php的HTML。

<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 width="100" style="border:#000; z-index:1;position: relative; border-width:2px; float:left" height="100px" src="
    <?php echo $upload_path.$large_image_name.$_SESSION['user_file_ext'];?>" id="thumbnail"/></form>

Answer 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();     });});

Answer 2

HTML代码<div&nbsp;class="rCol">&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id&nbsp;="prv"&nbsp;style="height:auto;&nbsp;width:auto;&nbsp;float:left;&nbsp;margin-bottom:&nbsp;28px;&nbsp;margin-left:&nbsp;200px;"></div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="rCol"&nbsp;style="clear:both;"> &nbsp;&nbsp;&nbsp;&nbsp;<label&nbsp;>&nbsp;Upload&nbsp;Photo&nbsp;:&nbsp;</label>&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type="file"&nbsp;id="file"&nbsp;name='file'&nbsp;onChange="&nbsp;return&nbsp;submitForm();"> &nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type="hidden"&nbsp;id="filecount"&nbsp;value='0'>以下是Ajax代码：function&nbsp;submitForm()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;fcnt&nbsp;=&nbsp;$('#filecount').val(); &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;fname&nbsp;=&nbsp;$('#filename').val(); &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;imgclean&nbsp;=&nbsp;$('#file'); &nbsp;&nbsp;&nbsp;&nbsp;if(fcnt<=5) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;data&nbsp;=&nbsp;new&nbsp;FormData(); &nbsp;&nbsp;&nbsp;&nbsp;data.append('file',&nbsp;$('#file')[0].files[0]); &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;imgname&nbsp;&nbsp;=&nbsp;&nbsp;$('input[type=file]').val(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;size&nbsp;&nbsp;=&nbsp;&nbsp;$('#file')[0].files[0].size; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;ext&nbsp;=&nbsp;&nbsp;imgname.substr(&nbsp;(imgname.lastIndexOf('.')&nbsp;+1)&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;if(ext=='jpg'&nbsp;||&nbsp;ext=='jpeg'&nbsp;||&nbsp;ext=='png'&nbsp;||&nbsp;ext=='gif'&nbsp;||&nbsp;ext=='PNG'&nbsp;||&nbsp;ext=='JPG'&nbsp;||&nbsp;ext=='JPEG') &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(size<=1000000) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;$.ajax({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;"<?php&nbsp;echo&nbsp;base_url()&nbsp;?>/upload.php", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type:&nbsp;"POST", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data:&nbsp;data, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;enctype:&nbsp;'multipart/form-data', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;processData:&nbsp;false,&nbsp;&nbsp;//&nbsp;tell&nbsp;jQuery&nbsp;not&nbsp;to&nbsp;process&nbsp;the&nbsp;data &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contentType:&nbsp;false&nbsp;&nbsp;&nbsp;//&nbsp;tell&nbsp;jQuery&nbsp;not&nbsp;to&nbsp;set&nbsp;contentType &nbsp;&nbsp;&nbsp;&nbsp;}).done(function(data)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(data!='FILE_SIZE_ERROR'&nbsp;||&nbsp;data!='FILE_TYPE_ERROR'&nbsp;) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fcnt&nbsp;=&nbsp;parseInt(fcnt)+1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#filecount').val(fcnt); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;img&nbsp;=&nbsp;'<div&nbsp;class="dialog"&nbsp;id&nbsp;="img_'+fcnt+'"&nbsp;><img&nbsp;src="<?php&nbsp;echo&nbsp;base_url()&nbsp;?>/local_cdn/'+data+'"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;href="#"&nbsp;id="rmv_'+fcnt+'"&nbsp;onclick="return&nbsp;removeit('+fcnt+')"&nbsp;class="close-classic"></a></div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type="hidden"&nbsp;id="name_'+fcnt+'"&nbsp;value="'+data+'">'; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#prv').append(img); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(fname!=='') &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fname&nbsp;=&nbsp;fname+','+data; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fname&nbsp;=&nbsp;data; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#filename').val(fname); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;imgclean.replaceWith(&nbsp;imgclean&nbsp;=&nbsp;imgclean.clone(&nbsp;true&nbsp;)&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;imgclean.replaceWith(&nbsp;imgclean&nbsp;=&nbsp;imgclean.clone(&nbsp;true&nbsp;)&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert('SORRY&nbsp;SIZE&nbsp;AND&nbsp;TYPE&nbsp;ISSUE'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;false; &nbsp;&nbsp;}//end&nbsp;size &nbsp;&nbsp;else &nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;imgclean.replaceWith(&nbsp;imgclean&nbsp;=&nbsp;imgclean.clone(&nbsp;true&nbsp;)&nbsp;);//Its&nbsp;for&nbsp;reset&nbsp;the&nbsp;value&nbsp;of&nbsp;file&nbsp;type &nbsp;&nbsp;&nbsp;&nbsp;alert('Sorry&nbsp;File&nbsp;size&nbsp;exceeding&nbsp;from&nbsp;1&nbsp;Mb'); &nbsp;&nbsp;} &nbsp;&nbsp;}//end&nbsp;FILETYPE &nbsp;&nbsp;else &nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;imgclean.replaceWith(&nbsp;imgclean&nbsp;=&nbsp;imgclean.clone(&nbsp;true&nbsp;)&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;alert('Sorry&nbsp;Only&nbsp;you&nbsp;can&nbsp;uplaod&nbsp;JPEG|JPG|PNG|GIF&nbsp;file&nbsp;type&nbsp;'); &nbsp;&nbsp;} &nbsp;&nbsp;}//end&nbsp;filecount &nbsp;&nbsp;else &nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;imgclean.replaceWith(&nbsp;imgclean&nbsp;=&nbsp;imgclean.clone(&nbsp;true&nbsp;)&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert('You&nbsp;Can&nbsp;not&nbsp;Upload&nbsp;more&nbsp;than&nbsp;6&nbsp;Photos'); &nbsp;&nbsp;}}以下是PHP代码：$filetype&nbsp;=&nbsp;array('jpeg','jpg','png','gif','PNG','JPEG','JPG'); &nbsp;&nbsp;&nbsp;foreach&nbsp;($_FILES&nbsp;as&nbsp;$key&nbsp;) &nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$name&nbsp;=time().$key['name']; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$path='local_cdn/'.$name; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$file_ext&nbsp;=&nbsp;&nbsp;pathinfo($name,&nbsp;PATHINFO_EXTENSION); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(in_array(strtolower($file_ext),&nbsp;$filetype)) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if($key['name']<1000000) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@move_uploaded_file($key['tmp_name'],$path); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;$name; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;"FILE_SIZE_ERROR"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;"FILE_TYPE_ERROR"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}//&nbsp;Its&nbsp;simple&nbsp;code.Its&nbsp;not&nbsp;with&nbsp;proper&nbsp;validation.现在，如果您想删除和删除页面和文件夹中的图像，那么代码就在这里进行删除。Ajax部分：function&nbsp;removeit&nbsp;(arg)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;id&nbsp;&nbsp;=&nbsp;arg; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;GET&nbsp;FILE&nbsp;VALUE &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;fname&nbsp;=&nbsp;$('#filename').val(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;fcnt&nbsp;=&nbsp;$('#filecount').val(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;GET&nbsp;FILE&nbsp;VALUE &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#img_'+id).remove(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#rmv_'+id).remove(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#img_'+id).css('display','none'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;dname&nbsp;&nbsp;=&nbsp;&nbsp;$('#name_'+id).val(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fcnt&nbsp;=&nbsp;parseInt(fcnt)-1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#filecount').val(fcnt); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;fname&nbsp;=&nbsp;fname.replace(dname,&nbsp;""); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;fname&nbsp;=&nbsp;fname.replace(",,",&nbsp;""); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#filename').val(fname); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.ajax({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;'delete.php', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type:&nbsp;'POST', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data:{'name':dname}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;success:function(a){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(a); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;}以下是PHP部分(delte.php)：$path='local_cdn/'.$_POST['name']; &nbsp;&nbsp;&nbsp;if(@unlink($path)) &nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;"Success"; &nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;else &nbsp;&nbsp;&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;"Failed"; &nbsp;&nbsp;&nbsp;}