|
|
-
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>AJAX image upload with, jQuery</title>
- <script type="text/javascript" src="jquery.min.js"></script>
- <script type="text/javascript">
-
- function append_img(img_url){
- alert(1);
- window.parent.document.getElementById('img').src=img_url;
- }
-
-
- </script>
- </head>
-
-
-
-
- <body>
-
- <p id="msg"></p>
-
- <input type="file" id="file" name="file" multiple />
-
- <img alt='' id='img' />
- <button id="upload">Upload</button>
- <button id="done">done</button>
-
-
- <script type="text/javascript">
- $(document).ready(function (e) {
- $('#upload').on('click', function () {
- var file_data = $('#file').prop('files')[0];
- window.console && console.log(file_data);
- var form_data = new FormData();
- form_data.append('file', file_data);
- $.ajax({
- url: 'test9.php', // point to server-side controller method
- dataType: 'text', // what to expect back from the server
- cache: false,
- contentType: false,
- processData: false,
- data: form_data,
- type: 'post',
- success: function (response) {
- if(response)
- window.parent.document.getElementById('img').src=response;
- //$('#msg').html(response); // display success response from the server
- console.log(response);
- },
- error: function (response) {
- $('#msg').html(response); // display error response from the server
- }
- });
-
- //$('#img').attr('src',file_data);
- });
-
- }
-
- );
-
- </script>
- </body>
- </html>
|
