Q.1 Я хотел бы преобразовать эту форму в ajax, но похоже, что у моего кода ajax чего-то не хватает. На submit ничего не делает.
Q2. Я также хочу, чтобы функция запускалась при изменении, когда файл был выбран, чтобы не ждать отправки.
Вот JS.
$('#imageUploadForm').on('submit',(function(e) { e.preventDefault() $.ajax({ type:'POST', url: $(this).attr('action'), data:$(this).serialize(), cache:false }); })); и HTMl с php.
<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>
сначала в вашем вызове 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(); }); });
Код 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.
Здесь загрузите и просмотрите часть done.Now, если вы хотите удалить и удалить изображение со страницы и папки, то оба кода здесь для удаления. Часть 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"; }
Вы можете использовать плагин 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/
Вот простой способ использования 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-файл здесь. Вот пример.
Слишком круто и слишком быстро И легко! 🙂