时间:2018-12-07 13:40:34
我们有时候上传表单时希望将表单中的文件提前上传,然后根据服务器返回的上传图片的路径,显示缩略图。如下图所示,选中文件即显示缩略图:
如何实现呢?这里我们采用两种方法,第一种采用原生ajax的方式,第二种采用jQuery的ajax方式。
第一种方式:原生ajax的方式
//前端部分代码
<form id="art_form" action="{{url('admin/article')}}" method="post" enctype="multipart/form-data">
{{csrf_field()}}
<input type="text" size="50" name="art_thumb" id="art_thumb">
<input id="file_upload" name="file_upload" type="file" multiple="true">
<p><img id="img1" alt="上传后显示图片" style="max-width:350px;max-height:100px;" /></p>
<input type="submit" value="提交">
</form>
<script type="text/javascript">
//当文件值改变时触发 uploadImage()函数
$(function () {
$("#file_upload").change(function () {
uploadImage();
})
})
function uploadImage() {
//获取表单元素
var formElement = document.querySelector("#art_form");
//生成formData对象,并将表单元素传入
var formData = new FormData(formElement);
//创建xhr对象用于ajax
var request = new XMLHttpRequest();
//监听响应状态变化
request.onreadystatechange=function()
{
if (request.readyState==4 && request.status==200)
{
//console.log(request.responseText);
//将服务器返回的图片路径赋值给img的src属性
$('#img1').attr('src','/'+request.responseText);
//文本框显示图片路径
$('#art_thumb').val(request.responseText);
}
}
//以post方式向/admin/upload路由发送请求
request.open("POST", "/admin/upload");
//发送请求
request.send(formData);
}
</script>
// 服务器端代码
public function upload()
{
//获取上传的文件对象
$file = Input::file('file_upload');
//判断文件是否有效
if($file->isValid()){
$entension = $file->getClientOriginalExtension();//上传文件的后缀名
$newName = date('YmdHis').mt_rand(1000,9999).'.'.$entension;
$path = $file->move(base_path().'/uploads',$newName);
$filepath = 'uploads/'.$newName;
//返回文件的路径
return $filepath;
}
}
第二种方式:jQuery的ajax的方式
//前端部分代码
<form id="art_form" action="{{url('admin/article')}}" method="post" enctype="multipart/form-data">
{{csrf_field()}}
<input type="text" size="50" name="art_thumb" id="art_thumb">
<input id="file_upload" name="file_upload" type="file" multiple="true">
<p><img id="img1" alt="上传后显示图片" style="max-width:350px;max-height:100px;" /></p>
<input type="submit" value="提交">
</form>
<script type="text/javascript">
$(function () {
$("#file_upload").change(function () {
uploadImage();
})
})
function uploadImage() {
// 判断是否有选择上传文件
var imgPath = $("#file_upload").val();
if (imgPath == "") {
alert("请选择上传图片!");
return;
}
//判断上传文件的后缀名
var strExtension = imgPath.substr(imgPath.lastIndexOf('.') + 1);
if (strExtension != 'jpg' && strExtension != 'gif'
&& strExtension != 'png' && strExtension != 'bmp') {
alert("请选择图片文件");
return;
}
var formData = new FormData($('#art_form')[0]);
$.ajax({
type: "POST",
url: "/admin/upload",
data: formData,
contentType: false,
processData: false,
success: function(data) {
$('#img1').attr('src','/'+data);
$('#art_thumb').val(data);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("上传失败,请检查网络后重试");
}
});
}
</script>
// 服务器端代码
public function upload()
{
//获取上传的文件对象
$file = Input::file('file_upload');
//判断文件是否有效
if($file->isValid()){
$entension = $file->getClientOriginalExtension();//上传文件的后缀名
$newName = date('YmdHis').mt_rand(1000,9999).'.'.$entension;
$path = $file->move(base_path().'/uploads',$newName);
$filepath = 'uploads/'.$newName;
//返回文件的路径
return $filepath;
}
}
第二种方式一定要注意 加上
contentType: false,
processData: false,
不然会报这种错误