php & jquery 上传图片，即时预览显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3126464/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
php & jquery upload image and preview display instantly
提问by nuttynibbles
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.
我期待创建一个上传模块，用户可以在其中浏览，单击打开，它会立即显示该图像的预览，而无需单击提交按钮，以便用户可以继续输入其他信息。
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，它基本上捕获了图像名称。但我的问题是我如何将上传图像发布到 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:
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>
i've seen what Uploadify can do but i would like to create one on my own.
我已经看到 Uploadify 可以做什么，但我想自己创建一个。
regards
问候
采纳答案by codez
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.
您只能通过发布表单发布图片，因此您必须使用 iframe 上传图片，而无需重新加载主页。当 iframe 重新加载时，在其响应中添加一些脚本，触发主页中的回调函数以显示刚刚上传的图像。
回答by Luke Stevenson
I saw an article with a jQuery solution for this recently:
我最近看到了一篇关于 jQuery 解决方案的文章：
Zurb Playground : "Image Uploads with 100% Less Suck. Guaranteed."
Zurb Playground：“图片上传减少 100%。保证。”
I would rewrite it here, but have not as it would be redundant.
我会在这里重写它，但没有因为它是多余的。
回答by P.B.
回答by bas
Files cannot be uploaded using pure AJAX. You may want to checkout the Form Plugin which does support file uploads: http://jquery.malsup.com/form/and integrate it into your solution. There you have few good examples using ajaxSubmit.
不能使用纯 AJAX 上传文件。您可能需要查看支持文件上传的表单插件：http: //jquery.malsup.com/form/并将其集成到您的解决方案中。你有几个使用 ajaxSubmit 的好例子。
回答by Craig
You might like to try this tutorial:
您可能想尝试本教程：
http://www.finalwebsites.com/forums/topic/php-ajax-upload-example
http://www.finalwebsites.com/forums/topic/php-ajax-upload-example
which should help you do exactly what you are asking.
这应该可以帮助您完全按照您的要求做。
回答by dave
This requires no submit button. You can just use an image and browse for files and it will automatically send it to php.
这不需要提交按钮。您可以只使用图像并浏览文件，它会自动将其发送到 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>
回答by Max Avenger
<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&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>
The above code is from bootstrap. Check out metronic template of bootstrap.
上面的代码来自bootstrap。查看 bootstrap 的 metronic 模板。
