图片上传(前端显示预览,后端php接收)
html:
<form action="{:Url('do_ls_law_upload')}" method="POST" accept-charset="utf-8" enctype="multipart/form-data">
<li>
<span class="leftSpan">封面</span>
<span class="img">
<img src="" alt="">
</span>
<div class="lsUpfindBtn">上传图片 <input type="file" name="file" id="file" /> </div>
</li>
</form>
js:
<script>
;(function(){
var
fileInput = document.querySelector('.lsUpfindBtn input'),
preview = document.querySelector('.ls_UploadDocuments li .img img');
// 监听change事件:
fileInput.addEventListener('change', function () {
preview.src = ""
// 检查文件是否选择:
if (!fileInput.value) {
info.innerHTML = '没有选择文件';
return;
}
// 获取File引用:
var file = fileInput.files[0];
// 获取File信息:
// 读取文件:
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result
preview.src = data
};
// 以DataURL的形式读取文件:
reader.readAsDataURL(file);
});
})()
</script>
PHP:
$file = request()->file('file');
$info = $file->move(ROOT_PATH.'/public/uploads/');//图片保存路径
$filesaveName = '/uploads/'.$info->getSaveName(); //储存到数据库
if(!$info){
$this->error('图片上传失败');
}
转载于:https://www.cnblogs.com/roseY/p/9950807.html
- 点赞
- 收藏
- 分享
- 文章举报
- Jersey后端服务接收ajax前端的图片上传
- Android端使用retrofit上传多张图片,后端使用Php接收图片
- 前端压缩图片以及php后端上传
- H5上传图片前端预览显示
- Jersey后端服务接收ajax前端的图片上传
- 图片上传显示进度条和预览图的前端实现之进度条篇
- jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
- 图片上传显示进度条和预览图的前端实现之预览图篇
- js上传图片预览,php后台接收实例,已改写为多图上传预览
- php图片上传存储源码,可实现预览
- 微信小程序实现图片上传功能实例(前端+PHP后端)
- php文件分类上传以及前端遍历显示
- 利用 HTML 5 的多图片上传及预览(不含前端的文件分割) 分类: HTML5 文件上传 上传图片的预览 XMLHTTPRequest对象 2014-01-13 11:05 419人阅读 评论(0) 收藏
- PHP之微信JSSDK图片上传预览下载到服务器
- 简单的做一个图片上传预览(web前端)
- js兼容火狐显示上传图片预览效果的方法(读取字节)
- 后端传输 X开头的字符串,前端接收失败,无法显示
- js兼容火狐显示上传图片预览效果的方法
- html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器
- jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码