Question

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

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

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>

我已经看到了上传可以做什么，但我想自己创建一个。

问候

Answer 1

我最近看到了一篇关于jQuery解决方案的文章：

Zurb Playground : "Image Uploads with 100% Less Suck. Guaranteed."

我会在这里重写它，但不要因为它是多余的。

Answer 2

对于每个人都找不到ajaxupload.js脚本...... 您可以下载here。

Answer 3

您只能通过发布表单发布图片，因此您必须使用iframe上传图片而不重新加载主页。当iframe重新加载时，在其响应中添加一些脚本，触发主页面中的回调函数，以显示刚刚上传的图像。

Answer 4

使用纯AJAX无法上传文件。您可能需要签出支持文件上传的表单插件：http://jquery.malsup.com/form/并将其集成到您的解决方案中。在那里你使用ajaxSubmit很少有很好的例子。

Answer 5

您可能想尝试本教程：

http://www.finalwebsites.com/forums/topic/php-ajax-upload-example

这应该可以帮助你完全按照自己的要求行事。

Answer 6

这不需要提交按钮。您可以使用图像并浏览文件，它会自动将其发送到php。

<div id="covercameraimage">
<label for="photoimg">
<img src="siteimages/cameracoverimage.png" style="cursor:pointer" title="Upload Cover" alt="Upload Cover" />
</label>
<form id="imageform" method="post" enctype="multipart/form-data" action='c.php'>
<div id='imageloadstatus' style='display:none'><img src="load.gif" alt="Uploading...."/></div>
<input type="hidden"  name="toid" id="toid" value="<?php echo $user1_id; ?>">
<div id='imageloadbutton'>
<input type="file" id="photoimg" name="photoimg" style="cursor: pointer;  display: none"//>
</div>
</form>
</div>

<script type="text/javascript">
$(document).ready(function()
{

$('body').on('change','#photoimg', function()
 {
var A=$("#imageloadstatus");
var B=$("#imageloadbutton");

$("#imageform").ajaxForm({target: '#usercover',
beforeSubmit:function(){
A.show();
B.hide();
},
success:function(){
A.hide();
B.show();
},
error:function(){
A.hide();
B.show();
} }).submit();
});

});
</script>
</div>

Answer 7

<div class="control-group-upload">
     <div class="controls">
         <div class="fileupload fileupload-new" data-provides="fileupload">
             <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
                 <img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="" />
             </div>
         <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
         <div>
             <span class="btn btn-file"><span class="fileupload-new">Select image</span>
             <span class="fileupload-exists">Change</span>
             <input type="file" class="default" />
         </span>
     <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
     </div>
</div>

以上代码来自bootstrap。查看metronic bootstrap模板。

php＆amp; jquery立即上传图像和预览显示

7 个答案: