javascript - How to POST the file type to PHP using AJAX? -
i have html file uploads image designated folders , subfolders. problem i'm facing i'm unable post form data php. below code.
html:
<!doctype html> <html> <head> <!--<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />--> <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script> <!--<script src="offline.js"></script>--> <meta http-equiv="content-type" name="viewport" content="width=200, charset=utf-8, initial-scale=1.4, maximum-scale=1.4, minimum-scale=1.4"/> <title>js bin</title> <!--[if ie]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> <script> function readurl(input) { if (input.files && input.files[0]) { var reader = new filereader(); reader.onload = function (e) { $('#blah') .attr('src', e.target.result) .width(300) .height(340); }; reader.readasdataurl(input.files[0]); } } </script> <script> $("form#form").submit(function(){ var formdata = new formdata($(this)[0]); $.ajax({ url : 'login.php', type: "post", data : formdata, success: function(data, textstatus, jqxhr) { //success } }); }); </script> </head> <body> <form enctype="multipart/form-data" id="form" method="post"> <input type="file" required id="image" name="image" onchange="readurl(this);" /> <img id="blah" src="#" alt="your image" /><br/><br/> <button>submit</button> </form> </body> </html> php
if(isset($_files['image'])) { // image upload html session_start(); $_session['str'];// target image supposed stored. $_session['img'];// used rename image. $image = basename($_files["image"]["name"]); echo "$image"; // added see if image being received in php or not. move_uploaded_file($_files['image']['tmp_name'], $_session['str'].$_session['img']); echo "upload success"; } what i'm trying is: once option pops choose file have function readurl shows preview of image needs uploaded. when user presses submit button should call post form data php. other not sending form data php. kindly suggest do.
add js
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script language="javascript" type="text/javascript"> <!-----add dev after -----> <input type="file" id="image" name="img" /> <div id="dvpreview"></div> $(function () { $("#image").change(function () { $("#dvpreview").html(""); var regex = /^([a-za-z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/; if (regex.test($(this).val().tolowercase())) { if ($.browser.msie && parsefloat(jquery.browser.version) <= 9.0) { $("#dvpreview").show(); $("#dvpreview")[0].filters.item("dximagetransform.microsoft.alphaimageloader").src = $(this).val(); } else { if (typeof (filereader) != "undefined") { $("#dvpreview").show(); $("#dvpreview").append("<img />"); var reader = new filereader(); reader.onload = function (e) { $("#dvpreview img").attr("src", e.target.result); } reader.readasdataurl($(this)[0].files[0]); } else { alert("this browser not support filereader."); } } } else { alert("please upload valid image file."); } }); }); </script>
Comments
Post a Comment