Javascript 发布前的图像预览
下图中的上载按钮允许用户选择照片。图像应立即显示,下一步按钮用于发布请求 我是这样做的:Javascript 发布前的图像预览,javascript,jquery,Javascript,Jquery,下图中的上载按钮允许用户选择照片。图像应立即显示,下一步按钮用于发布请求 我是这样做的: <form class="form-horizontal" role="form" method="POST" action='{{URL::route('postImage')}}' runat="server"> <div class="form-group"> <label class='col-md-4 control-label'>Pr
<form class="form-horizontal" role="form" method="POST" action='{{URL::route('postImage')}}' runat="server">
<div class="form-group">
<label class='col-md-4 control-label'>Profile Picture</label>
<div class='col-md-6'>
<img src='/images/default.jpg' id='image' class="img-responsive img-circle img-thumbnail img_profile pull-left">
<input type="file" name='profile_picture' id="file_ID" class='hidden' >
<a href='#' class="btn btn-primary" onclick="document.getElementById('file_ID').click(); return false;"><span class='glyphicon glyphicon-camera'></span> Upload Photo</a>
</div>
</div>
“下一步”按钮不起作用。这是一个简单的按钮,类型为submit。它可能有什么问题?非常感谢您的帮助。我们无法看到您应用程序的所有相关部分:您发布的代码不是“MVCE”()。具体来说,您没有在HTML中包含“下一步”按钮,因此我们无法帮助您解决可能导致问题的原因。另外,“不工作”是对你的问题的无益描述。你看到了什么样的行为,你希望看到什么样的行为?谢谢你的回答。。图像和其他较大大小的文件需要enctype=multipart/form数据,这就是问题所在。。。
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#image').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#file_ID").change(function(){
readURL(this);
});