ajax 上传图片所旅途,Ajax上传图片以及上传之前先预览
手头上有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成。在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果,解决了这两个小问题,和小伙伴们分享下。
上传之前的预览
方式一
先来说说图片上传之前的预览问题。这里主要采用了HTML5中的FileReader对象来实现,关于FileReader对象,如果小伙伴们不了解,可以查看这篇博客HTML5学习之FileReader接口。我们来看看实现方式:
Ajax上传文件
用户名:
用户图像:
$("#btnClick").click(function () {
var formData = new FormData();
formData.append("username", $("#username").val());
formData.append("file", $("#userface")[0].files[0]);
$.ajax({
url: '/fileupload',
type: 'post',
data: formData,
processData: false,
contentType: false,
success: function (msg) {
alert(msg);
}
});
});
function preview(file) {
var prevDiv = document.getElementById('preview');
if (file.files && file.files[0]) {
var reader = new FileReader();
reader.onload = function (evt) {
prevDiv.innerHTML = '';
}
reader.readAsDataURL(file.files[0]);
} else {
prevDiv.innerHTML = '
}
}
这里对于支持FileReader的浏览器直接使用FileReader来实现,不支持FileReader的浏览器则采用微软的滤镜来实现(注意给图片上传的input标签设置onchange函数)。
实现效果如下:
方式二
除了这种方式之外我们也可以采用网上现成的一个jQuery实现的方式。这里主要参考了这里。
不过由于原文年代久远,里边使用的$.browser.msie从jQuery1.9就被移除掉了,所以如果我们想使用这个得做一点额外的处理,我修改后的uploadPreview.js文件内容如下:
jQuery.browser={};(function(){jQuery.browser.msie=false; jQuery.browser.version=0;if(navigator.userAgent.match(/MSIE ([0-9]+)./)){ jQuery.browser.msie=true;jQuery.browser.version=RegExp.$1;}})();
jQuery.fn.extend({
uploadPreview: function (opts) {
var _self = this,
_this = $(this);
opts = jQuery.extend({
Img: "ImgPr",
Width: 100,
Height: 100,
ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
Callback: function () {}
}, opts || {});
_self.getObjectURL = function (file) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file)
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file)
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file)
}
return url
};
_this.change(function () {
if (this.value) {
if (!RegExp("\.(" + opts.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
alert("选择文件错误,图片类型必须是" + opts.ImgType.join(",") + "中的一种");
this.value = "";
return false
}
if ($.browser.msie) {
try {
$("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
} catch (e) {
var src = "";
var obj = $("#" + opts.Img);
var div = obj.parent("div")[0];
_self.select();
if (top != self) {
window.parent.document.body.focus()
} else {
_self.blur()
}
src = document.selection.createRange().text;
document.selection.empty();
obj.hide();
obj.parent("div").css({
'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',
'width': opts.Width + 'px',
'height': opts.Height + 'px'
});
div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src
}
} else {
$("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
}
opts.Callback()
}
})
}
});
然后在我们的html文件中引入这个js文件即可:
Ajax上传文件
用户名:
用户图像:
$("#btnClick").click(function () {
var formData = new FormData();
formData.append("username", $("#username").val());
formData.append("file", $("#userface")[0].files[0]);
$.ajax({
url: '/fileupload',
type: 'post',
data: formData,
processData: false,
contentType: false,
success: function (msg) {
alert(msg);
}
});
});
$("#userface").uploadPreview({Img: "ImgPr", Width: 120, Height: 120});
这里有如下几点需要注意:
1.HTML页面中要引入我们自定义的uploadPreview.js文件
2.预先定义好要显示预览图片的img标签,该标签要有id。
3.查找到img标签然后调用uploadPreview函数
执行效果如下:
Ajax上传图片文件
Ajax上传图片文件就简单了,没有那么多方案,核心代码如下:
var formData = new FormData();
formData.append("username", $("#username").val());
formData.append("file", $("#userface")[0].files[0]);
$.ajax({
url: '/fileupload',
type: 'post',
data: formData,
processData: false,
contentType: false,
success: function (msg) {
alert(msg);
}
});
核心就是定义一个FormData对象,将要上传的数据包装到这个对象中去。然后在ajax上传数据的时候设置data属性就为formdata,processData属性设置为false,表示jQuery不要去处理发送的数据,然后设置contentType属性的值为false,表示不要设置请求头的contentType属性。OK,主要就是设置这三个,设置成功之后,其他的处理就和常规的ajax用法一致了。
后台的处理代码大家可以在文末的案例中下载,这里我就不展示不出来了。
OK,以上就是我们对Ajax上传图片以及图片预览的一个简介,有问题的小伙伴欢迎留言讨论。
以上。
ajax 上传图片所旅途,Ajax上传图片以及上传之前先预览相关推荐
- html上传头像及预览,js实现头像上传并且可预览提交
在用户注册账号或者修改资料的时候会需要用户在本地选择一张图片作为头像,并同时预览, 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是, ...
- iOS学习:调用相机,选择图片上传,带预览功能
iOS学习:调用相机,选择图片上传,带预览功能 发表于2年前(2013-05-30 21:38) 阅读( 18194) | 评论( 16) 27人收藏此文章,我要收藏 赞3 8月22日珠海 OSC ...
- vue3 el-upload 上传附件及预览 限制只能上传一个图片或者pdf格式的文件
vue3 el-upload 上传附件及预览 限制只能上传一个图片或者pdf格式的文件 效果如图 直接看代码吧 template部分 <div class="file-upload&q ...
- js上传视频,预览视频
js上传视频,预览视频 <videostyle="width:300px; height:auto;object-fit: fill;"playsinlinecontrols ...
- JavaScript 实现图片上传前本地预览
JavaScript 实现图片上传前本地预览 图片上传前预览,应该算是一个普遍的需求,很多时候可能选中的图片并不是想要的那张,所以需要上传前预览下. JS(浏览器中)是一门特殊的语言,它没有直接读写磁 ...
- struts上传word和excel文件到oracle,Struts文件上传,下载,重传,预览
[Struts2]☆★之文件上传,下载,重传,预览 今日群里一兄弟问我能否给一份struts文件上传下载的例子,因为自己项目比较紧所以想在网上找 些源码给他,但是纵观全网,写的都不是太全,这让新手使用 ...
- 微信小程序云开发实现上传文件和预览下载文件
微信小程序云开发实现上传文件和预览下载文件 一.前言 目前微信提供了一个接口 wx.chooseMessageFile 它能让用户从聊天记录里面选择一个或者多个文件,然后返回它的一些信息,列入文件的p ...
- PHP上传文件并预览
达到上传文件并预览效果主要是一下代码: <h4>文件信息</h4> <?php if ($_SERVER["REQUEST_METHOD"] == & ...
- html上传头像及预览,JS实现上传头像并实时预览
说起各大网站的用户中心功能,其中就少不了用户头像上传这个小小的功能,如果我们依托框架来编写的的话,相信非常的容易,但如果我们自己来单纯的使用JS来实现头像上传,并在选择本地头像的时候,实现预览我想也是 ...
- java批量上传图片预览_SpringMVC批量上传图片,实现上传前图片预览
最近有个功能需要实现批量上传图片,然后实现图片预览,因为项目比较老,同时对界面和用户操作体验也要求不太高,就没去找网上的开源插件,直接写了个简单的功能,这里做个记录备份 因为这个是实验性的小代码,就没 ...
最新文章
- php智能客服,智能客服系统
- Spring AOP+事务控制
- 作业: IT 行业博客网站分析和创新
- 阿里云容器服务全面升级为 ACK Anywhere,让云的边界拓展至企业需要的每个场景
- JFace中Dialog类的使用方法
- VTK:Rendering之DiffuseSpheres
- QML中导入JavaScript资源
- 高等数学下-赵立军-北京大学出版社-题解-练习8.1
- matlab表达一次函数,[转载]MATLAB数据拟合例子(一次函数、指数函数、双曲线)...
- 认识Java中的异常、异常的基本用法
- 离线批量数据通道Tunnel的最佳实践及常见问题
- c语言删除元素1116,C语言网蓝桥杯1116 IP判断
- 自定义Flume Sink:ElasticSearch Sink
- 关于 System.getProperty
- [JAVA][Eclipse]JVM terminated. Exit code=13
- 【干货】高盛合伙人制度和激励机制!
- bSRVCC振铃前SRVCC信令流程
- 华为Mate 20 Pro拆解、iPhone XR 拆解、iPhone XS/XS Max拆解
- python3爬虫伪装代理IP
- 从0到1的CTF之旅————Web(1)
热门文章
- 四针角oled屏连接arduino_Arduino提高篇03—OLED屏图片显示
- 网络安全从小白到专家
- 2021年谷歌地球专业版使用方法,解决Google Earth无法连接服务器问题。
- 【堆栈溢出】堆栈溢出
- 微型计算机原理与接口技术马静答案,微机原理与接口技术(马静)
- 腾讯QQ空间登录的方法实现方式与验证过程分析
- 一级倒立摆MATLAB仿真程序(搬运)
- Oracle(7)——Oracle修改国家字符集
- 厉害了:tcgames电脑玩手游助手新功能强势上线,可编程游戏按键
- php怎么调用php语言包,thinkphp里怎么调用语言包