显示上传成功后，上传的图片 [英] Showing uploaded image after successful upload
问题描述
我现在用的是Carrierwave Magnific酒店宝石弹出（收藏夹）内。我想要做的是，在上传的图像，它会显示新上传的图片。
目前经过图像从收藏夹上传，它将继续显示你最初用成功的消息，你的形象已成功上传观看图像。
目前的设置是用户点击，将打开收藏夹与他们的相册中的照片。里面的收藏夹就可以删除当前的照片，上传新的照片，或使你的头像。
photos.js.coffee：
jQuery的 - ＆GT;
$（'＃形式new_photo）。文件上传
数据类型：剧本
地址：（即数据） - ＆GT;
文件= data.files [0]
data.context = $（TMPL（模板上传，文件））
$（'＃new_photo）。追加（data.context）
data.submit（）
进展情况：（即数据） - ＆GT;
如果data.context
进度= parseInt函数（data.loaded / data.total * 100，10）
data.context.find（'巴'）。CSS（'宽'，进步+'％'）
停止：（即数据） - ＆GT;
$（'上传'）。隐藏（）
照片控制器：
高清创建
@photo = Photo.create（PARAMS [：照片]）
@ photo.user = CURRENT_USER
如果@ photo.save
闪光[：通知] =成功创建的照片。
redirect_to时：回
其他
渲染：行动=＆GT; '新'
结束
结束
show.html.slim：
- 如果@ user.photos。present？
.slider_container
H4照片
a.left_arrow HREF =＃
IMG的alt =SRC =/资产/ left_arrow.png/
ul.slider.parent容器
= hidden_field_tag'current_index'，0
-@user.photos.each_with_index~~MD~~aux做|照片，指数|
李类=＃{索引＆gt; 2隐藏：？''}
=的link_to image_tag（photo.image_url（：拇指）），＃+ dom_id（图）
DIV ID =＃{dom_id（照片）}级=MFP隐藏
中央
= image_tag（photo.image_url（：弹出式））
- 如果@user == CURRENT_USER
= button_to（设置为简介的图片，[：头像，照片]类：BTN）
= button_to删除，照片：确认=＆GT; 你确定吗？，：方法=＆GT; ：删除类：BTN
=的form_for Photo.new办| F |
= f.label：形象，上传照片
= f.file_field：形象，多方面的：真正的，名称：照片[图]
脚本＃模板上传类型=文/ X-TMPL
.upload
| {％= o.name％}
。进展
的.bar风格=（宽度：0％）
你这样做是非常复杂地..
这是一个简单的solution.Write javascript函数用ajax发送所选图像。
＆LT;脚本＆GT;
VAR的客户=新XMLHtt prequest（）;
功能upload_banner（）
{
var文件=的document.getElementById（文件）;
VAR FORMDATA =新FORMDATA（）;
formdata.append（文件，file.files [0]）;
var中的文件=的document.getElementById（文件）的文件。
VAR FILE_NAME =文件[0]。名称;
//警报（FILE_NAME）;
VAR FILE_EXTENSION = file_extension_get（FILE_NAME）;
如果（FILE_EXTENSION ==JPG|| FILE_EXTENSION ==JPG|| FILE_EXTENSION ==JPEG|| FILE_EXTENSION ==JPEG|| FILE_EXTENSION ==GIF|| FILE_EXTENSION ==GIF|| FILE_EXTENSION ==PNG|| FILE_EXTENSION ==PNG）
{
client.open（后，small_img.php，真正的）;
client.send（FORMDATA）; / *发送到服务器* /
}
其他
{
警报（错误的文件格式）;
}
}
/ *检查响应状态* /
client.onreadystatechange =功能（）
{
警报（client.readyState +SSSSS+ client.status）;
如果（client.readyState == 4和＆安培; client.status == 200）
{
变种米= client.responseText.toString（）;
$（＃upload_img_view）HTML（M）;
upload_id（）;
}
}
功能file_extension_get（文件）
{
返回（/[.]/.exec(file））？ 。/[^.]+$/ EXEC（file.toLowerCase（））：'';
}
功能upload_id（）
{
。VAR uploadid =的document.getElementById（'upload_id'）值;
$（＃banner_id）VAL（uploadid）。
返回true;
}
＆LT; / SCRIPT＆GT;
+++++++++++++++++++++++++++++++++++++++++++++++ +++++
在HTML文件中写入以下code上传的文件。
＆LT;输入类型=文件ID =文件名称=文件的onchange =upload_banner（）必要的名称=file_create_video＆GT; ＆LT; BR＆GT;
＆LT; DIV CLASS =uplod-IMGID =upload_img_view＆GT;
+++++++++++++++++++++++++++++++++++++++++++++++ +++
在PHP文件中使用下面的code small_img.php
$ PATH =/无功/网络/上传/ profile_pic /;
如果（move_uploaded_file（$ TMP，$路径。$ actual_image_name））
{
回声＆LT; IMG SRC ='$ U高度=100％WIDTH =100％＆GT;＆LT;输入类型=隐藏ID =upload_id的名字='upload_id'值='$ K'＆GT ;;
}
这对我的作品......试试吧..根据你的code做一些修改
I am using the Carrierwave gem inside of Magnific Popup (lightbox). What I want to do is that after uploading a image that it will show the newly uploaded image.
Currently after a image is uploaded from the lightbox, it will continue displaying the image you were originally viewing with a "success" message that your image was successfully uploaded.
The current setup is Users click on a photo that will open a lightbox with their gallery photos. Inside the lightbox you can delete the current photo, upload a new photo, or make it your avatar.
photos.js.coffee:
jQuery ->
$('form#new_photo').fileupload
dataType: "script"
add: (e, data) ->
file = data.files[0]
data.context = $(tmpl("template-upload", file))
$('#new_photo').append(data.context)
data.submit()
progress: (e, data) ->
if data.context
progress = parseInt(data.loaded / data.total * 100, 10)
data.context.find('.bar').css('width', progress + '%')
stop: (e, data) ->
$('.upload').hide()
Photos controller:
def create
@photo = Photo.create(params[:photo])
@photo.user = current_user
if @photo.save
flash[:notice] = "Successfully created photos."
redirect_to :back
else
render :action => 'new'
end
end
show.html.slim:
-if @user.photos.present?
.slider_container
h4 Photos
a.left_arrow href="#"
img alt="" src="/assets/left_arrow.png" /
ul.slider.parent-container
= hidden_field_tag 'current_index',0
-@user.photos.each_with_index do |photo, index|
li class="#{index > 2 ? 'hide' : ''}"
= link_to image_tag(photo.image_url(:thumb)), "#" + dom_id(photo)
div id="#{dom_id(photo)}" class="mfp-hide"
center
= image_tag(photo.image_url(:popup))
- if @user == current_user
= button_to('Set as Profile Image', [:avatar, photo], class: 'btn')
'
= button_to "remove", photo, :confirm => 'Are you sure?', :method => :delete, class: 'btn'
= form_for Photo.new do |f|
= f.label :image, "Upload photos:"
= f.file_field :image, multiple: true, name: "photo[image]"
script#template-upload type="text/x-tmpl"
.upload
| {%=o.name%}
.progress
.bar style=("width: 0%")
you are doing this very complicatedly..
this is the simple solution.Write javascript function to send the selected image using ajax.
<script>
var client = new XMLHttpRequest();
function upload_banner()
{
var file = document.getElementById("file");
var formdata = new FormData();
formdata.append("file", file.files[0]);
var files=document.getElementById('file').files;
var file_name=files[0].name;
//alert(file_name);
var file_extension=file_extension_get(file_name);
if( file_extension == "jpg" || file_extension == "JPG" || file_extension == "jpeg" || file_extension == "JPEG" || file_extension == "gif" || file_extension == "GIF" || file_extension == "png" || file_extension == "PNG" )
{
client.open("post", "small_img.php", true);
client.send(formdata); /* Send to server */
}
else
{
alert("Wrong file format");
}
}
/* Check the response status */
client.onreadystatechange = function()
{
alert(client.readyState+"sssss"+client.status);
if (client.readyState == 4 && client.status == 200)
{
var m=client.responseText.toString();
$("#upload_img_view").html(m);
upload_id();
}
}
function file_extension_get(file)
{
return (/[.]/.exec(file)) ? /[^.]+$/.exec(file.toLowerCase()) : '';
}
function upload_id()
{
var uploadid=document.getElementById('upload_id').value;
$("#banner_id").val(uploadid);
return true;
}
</script>
++++++++++++++++++++++++++++++++++++++++++++++++++++
In Html file write the below code to upload the file..
<input type="file" id="file" name="file" onchange="upload_banner()" required name="file_create_video"> <br>
<div class="uplod-img" id="upload_img_view">
++++++++++++++++++++++++++++++++++++++++++++++++++
in php file use the below code small_img.php
$path = "/var/www/upload/profile_pic/";
if(move_uploaded_file($tmp, $path.$actual_image_name))
{
echo "<img src='$u' height='100%' width='100%'> <input type='hidden' id='upload_id' name='upload_id' value='$k' >";
}
this works for me...try it.. make some changes according to your code
这篇关于显示上传成功后，上传的图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
