NoteOnMe博客平台搭建
Não pode escolher mais do que 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

68 linhas
2.4 KiB

há 3 anos
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>AJAX image upload with, jQuery</title>
  6. <script type="text/javascript" src="jquery.min.js"></script>
  7. <script type="text/javascript">
  8. function append_img(img_url){
  9. alert(1);
  10. window.parent.document.getElementById('img').src=img_url;
  11. }
  12. </script>
  13. </head>
  14. <body>
  15. <p id="msg"></p>
  16. <input type="file" id="file" name="file" multiple />
  17. <img alt='' id='img' />
  18. <button id="upload">Upload</button>
  19. <button id="done">done</button>
  20. <script type="text/javascript">
  21. $(document).ready(function (e) {
  22. $('#upload').on('click', function () {
  23. var file_data = $('#file').prop('files')[0];
  24. window.console && console.log(file_data);
  25. var form_data = new FormData();
  26. form_data.append('file', file_data);
  27. $.ajax({
  28. url: 'test9.php', // point to server-side controller method
  29. dataType: 'text', // what to expect back from the server
  30. cache: false,
  31. contentType: false,
  32. processData: false,
  33. data: form_data,
  34. type: 'post',
  35. success: function (response) {
  36. if(response)
  37. window.parent.document.getElementById('img').src=response;
  38. //$('#msg').html(response); // display success response from the server
  39. console.log(response);
  40. },
  41. error: function (response) {
  42. $('#msg').html(response); // display error response from the server
  43. }
  44. });
  45. //$('#img').attr('src',file_data);
  46. });
  47. }
  48. );
  49. </script>
  50. </body>
  51. </html>