php& jQuery上传图片并立即显示预览 [英] php & jquery upload image and preview display instantly

问题描述

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

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，下面基本上捕获了图像名称.但是我的问题是，由于没有用于POST的提交按钮，我如何将上传图像发布到php脚本中?我无法捕获$ _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上传图片并立即显示预览的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！