html ajax 图片上传,Ajax实现图片上传并预览功能
先给大家展示下效果图,大家感觉不错,请参考实现代码。
最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能。虽然现在有很多的插件能实现,但是还是觉得自己写比较好。我们知道,图片上传需要一个input:file表单
当我们点击表单的时候提示选择需要上传的图片。但是此需求我们分析一下,可以在点击图片的时候使用JS实现预览功能,并且楼主也是这样做的。代码如下:
function getFileUrl(sourceId) {
var url;
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
return url;
}
function preImg(sourceId, targetId) {
var url = getFileUrl(sourceId);
var imgPre = document.getElementById(targetId);
imgPre.src = url;
}
效果如下:
但是这样的话会涉及很多兼容问题。所以就想到了Ajax,在图片上传时,使用Ajax技术。将图片上传到服务器,再由服务器返回给我们图片的上传地址,然后添加到img标签中去。过程虽然麻烦了点,但是亲测不会有兼容问题。
需要发送Ajax请求的话,当然input:file表单是不能实现我们的需求的,因此,我们需要给表单关联一个单击事件去帮我们进行Ajax请求并选择图片
头像
当我们点击上传图片这个button按钮时触发input:file选择图片实现Ajax上传
function sc(){
var animateimg = $("#f").val(); //获取上传的图片名 带//
var imgarr=animateimg.split('\\'); //分割
var myimg=imgarr[imgarr.length-1]; //去掉 // 获取图片名
var houzui = myimg.lastIndexOf('.'); //获取 . 出现的位置
var ext = myimg.substring(houzui, myimg.length).toUpperCase(); //切割 . 获取文件后缀
var file = $('#f').get(0).files[0]; //获取上传的文件
var fileSize = file.size; //获取上传的文件大小
var maxSize = 1048576; //最大1MB
if(ext !='.PNG' && ext !='.GIF' && ext !='.JPG' && ext !='.JPEG' && ext !='.BMP'){
parent.layer.msg('文件类型错误,请上传图片类型');
return false;
}else if(parseInt(fileSize) >= parseInt(maxSize)){
parent.layer.msg('上传的文件不能超过1MB');
return false;
}else{
var data = new FormData($('#form1')[0]);
$.ajax({
url: "{:url('User/uppic')}",
type: 'POST',
data: data,
dataType: 'JSON',
cache: false,
processData: false,
contentType: false
}).done(function(ret){
if(ret['isSuccess']){
var result = '';
var result1 = '';
// $("#show").attr('value',+ ret['f'] +);
result += '';
result1 += '';
$('#result').html(result);
$('#show').html(result1);
layer.msg('上传成功');
}else{
layer.msg('上传失败');
}
});
return false;
}
}
这里我们采用FormData对面进行表单提交,然后服务器端接收
public function uppic()
{
$file = request()->file('f');
$info = $file->move(ROOT_PATH . 'public/uploads/avatar');
$a=$info->getSaveName();
$imgp= str_replace("\\","/",$a);
$imgpath='uploads/avatar/'.$imgp;
$banner_img= $imgpath;
$response = array();
if($info){
$response['isSuccess'] = true;
$response['f'] = $imgpath;
}else{
$response['isSuccess'] = false;
}
echo json_encode($response);
}
这里会返回图片上传的url路径:$response['f] = $imgpath;现在我们要做的就是将这个url写进前台HTML部分进行一个显示
在JS中添加
$('#show').html(result1);
总结
以上所述是小编给大家介绍的Ajax实现图片上传并预览功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
html ajax 图片上传,Ajax实现图片上传并预览功能相关推荐
- java 根据预览图片上传_JavaSctit 利用FileReader和滤镜上传图片预览功能
filereader 对象允许web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 file或 blob对象指定要读取的文件或数据. 1.filereader接口的方法 fi ...
- 利用jquery.form.js实现Ajax无刷新图片上传及预览功能
某些时候当我们做登记页面的时候可能需要上传图片,并实现即时预览的功能. 如果只是预览而不上传,可以使用ImagePreview来实现,方便简单.如果需要上传,那么你也可以使用uploadify无刷新上 ...
- 原生js实现ajax的文件异步提交功能、图片预览功能.实例
采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...
- alert()的功能_前端实现简单的图片上传小图预览功能
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- 微信小程序实现图片是上传、预览功能
本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法,分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 1.可以调用相机也可以从本地相册选择 2.本地实现 ...
- java批量上传图片_JAVA图片批量上传JS-带预览功能
这篇文章就简单的介绍一个很好用的文件上传工具,批量带预览功能.直接贴代码吧,都有注释,很好理解. HTML页面 pageEncoding="UTF-8"%> 新增照片 var ...
- JAVA实现一个图片上传预览功能
这个小项目主要使用java实现了一个简单的图片上传预览功能,废话不多说,先上实现成果 ^ _ ^
- [html] 图片上传时实现本地预览功能的原理是什么?
[html] 图片上传时实现本地预览功能的原理是什么? 通过HTML5 File API读取用户上传的图片,生成一个image对象显示到页面 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容 ...
- js图片上传预览功能
最近项目中用到的图片上传前预览功能,兼容IE6-9,FF <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
最新文章
- c与c++中struct区别
- python+opencv 给女朋友照片加上个性相框,学会等着她夸你。
- android-api28转换到api19-不能编译
- 男人的快乐可以多简单?
- (精)【ACM刷题之路】POJ题目详细多角度分类及推荐题目
- 两个输出文件名解析为同一输出路径_解析 crash log(一)
- kubernetes存储系统介绍(Volume、PV、dynamic provisioning,阿里云服务器nfs创建pv,hostpath创建pv)
- 哪吒票房一路飙升100行python代码抓取豆瓣短评
- Python 抓取钢铁价格 ==> 计算季度平均价格
- 谈谈我在创业公司的感悟
- 信用评分卡建模:决策树模型
- 深度学习——知识点总结3(损失函数Loss)
- android帧动画卡顿现象,css3针对移动端卡顿问题的解决(动画性能优化)
- 网络发现自动关闭不能启用、无法启用文件和打印共享的解决办法
- 八大口碑速溶咖啡品牌盘点
- 免费馅饼 (数据结构)
- Linux 安装redis5.0.7 设置密码,开启远程访问
- Flume监听多个文件目录,并根据文件名称不同,输出到kafka不同topic中
- 深刻:现在计算机专业学生怎么这样
- 明天调剂系统正式开放!计算机/软件等专业调剂信息集合!
热门文章
- ChatGPT持续火爆,对区块链有什么影响?
- MySQL卸载不干净回不到初始安装页面(MySQL Connector Net卸载不了),重装报错Database initialization failed等问题解决办法
- 3.1-3.3 FEMA
- 六款网站统计工具介绍
- php智能识别收货地址信息
- java web汽车商城_基于jsp的网上汽车商城-JavaEE实现网上汽车商城 - java项目源码...
- Kafka异常问题记录
- 【Web技术】1176- 前端模块依赖关系分析与应用
- 快压软件(彻底再见,谢谢)
- Jmeter+Ant+Jenkins自动化接口测试框架