javascript - upload form file with ajax -
this question has answer here:
- is possible use ajax file upload? 7 answers
i want upload file , save on server jquery ajax. i've tried didn't work. doesn't want process it. do:
html code
<form action="" method="post" enctype="multipart/form-data"> <input type="file" name="submit_file" id="submit_file" required > <input type="text" name="submit_message" id="submit_message"> </form> <a href="javascript:upload();" ><img src="img/join_btn.png" /></a> validation , ajax
<script type="text/javascript"> function upload() { var $submit_file = $("#submit_file").val(); var $submit_message = $("#submit_message").val(); if($submit_file == '') { alert('please choose picture'); $('#submit_file').focus(); //return false; } else if($submit_message == '') { alert('please write message'); $('#submit_message').focus(); //return false } else { uploadfile(); } } </script> <script type="text/javascript"> function uploadfile() { var $submit_file = ''; var $submit_message = ''; if($("#submit_file").val()) {$submit_file = $("#submit_file").val()}; if($("#submit_message").val()) {$submit_message = $("#submit_message").val()}; $.ajax( { global: false, cache: false, url: "./proc_intro.php", type: "post", data: { submit_file: $submit_file, submit_message: $submit_message, }, datatype: "json", success: function(json) { if (json.result == "success") { //alert('success'); settimeout(function(){ showlayer('main_submit'); },1000); } else { alert('server error'); } } } ); } </script> proc_intro.php file
<?php $submit_file = $_request[submit_file]; $submit_message = $_request[submit_message]; $allowed_filetypes = array('.jpg','.gif','.bmp','.png'); $max_filesize = 524288; $upload_path = './images/'; $filename = $_files[$submit_file]['name']; $ext = substr($filename, strpos($filename,'.'), strlen($filename)-1); if(!in_array($ext,$allowed_filetypes)) die('the file attempted upload not allowed.'); if(filesize($_files['submit_file']['tmp_name']) > $max_filesize) die('the file attempted upload large.'); if(!is_writable($upload_path)) die('you cannot upload specified directory, please chmod 777.'); if(move_uploaded_file($_files['submit_file']['tmp_name'],$upload_path . $filename)) { echo '{"result":"success"}'; }else { echo '{"result":"fail"}'; } ?> what can file uploaded correctly using ajax? have idea? thank in advance.
check out
function progresshandlingfunction(e){ if(e.lengthcomputable){ $('progress').attr({value:e.loaded,max:e.total}); } } function uploadfile() { var $submit_file = ''; var $submit_message = ''; if($("#submit_file").val()) {$submit_file = $("#submit_file").val()}; if($("#submit_message").val()) {$submit_message = $("#submit_message").val()}; var formdata = new formdata($('form')[0]); $.ajax( { global: false, cache: false, url: "./proc_intro.php", type: "post", data: formdata , xhr: function() { // custom xmlhttprequest var myxhr = $.ajaxsettings.xhr(); if(myxhr.upload){ // check if upload property exists myxhr.upload.addeventlistener('progress',progresshandlingfunction, false); // handling progress of upload } return myxhr; }, //ajax events // beforesend: beforesendhandler, success:function() { alert('success'); }, error: function() { alert('error'); }, // form data //options tell jquery not process data or worry content-type. cache: false, contenttype: false, processdata: false } ); } 
Comments
Post a Comment