php &jquery 上传图片并即时预览显示

问题描述

我期待创建一个上传模块，用户可以在其中浏览，点击打开，它会立即显示该图像的预览，而无需点击提交按钮，以便用户可以继续输入其他信息.

im looking forward to create an upload module where user can browse, click open and it will instantly display a preview of that image without having to click a submit button so that user can continue to key in other information.

我在下面做了一个简单但不完整的 jquery，它基本上捕获了图像名称.但我的问题是我如何将上传图像发布到 php 脚本，因为 POST 没有提交按钮?我无法捕获 $_FILES 数组值.

i've done a simple but incomplete jquery below which basically capture the image name. but my question is how do i post the upload image to the php script since there is there is no submit button for POST? i cant capture $_FILES array values.

jquery:

$(document).ready(function() {
  $("#uploadimage").change(function() {
      var imagesrc = $("#uploadimage").val();
      $.post("/script/ajax_uploadimage.php", $("#formuploadimage").serialize(),
      function(data){
        //do something here
      },"json");
  });
});

html表单:

<form name="formuploadimage" enctype="multipart/form-data" action="/upload.php" method="POST">
    <table> 
        <tr><td>Image: </td><td><div id="imagepreview"></div></td></tr> 
        <tr><td>Upload a photo: </td><td><input type="file" name="uploadimage" id="uploadimage" /></td></tr>
    </table> 
</form>

我已经看到 Uploadify 可以做什么，但我想自己创建一个.

i've seen what Uploadify can do but i would like to create one on my own.

问候

推荐答案

只能通过发帖形式发图片，所以必须使用iframe上传图片，无需重新加载主页.当 iframe 重新加载时，在其响应中添加一些脚本，在主页中触发回调函数以显示刚刚上传的图像.

You can post image only by posting form, so you must use iframe to upload image without reloading main page. When iframe reloads, add some script in its response which triggers callback function in main page to display just uploaded image.

这篇关于php &jquery 上传图片并即时预览显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！