h5图片展示和ajax上传
<img src="" id="img"/>
<script src="http://static.lamian.tv//pc/public/js/jquery-1.8.3.min.js?v=e128811631"></script>
<script> $('#file').change(function (e) {
console.log(event.target.files);
var files = event.target.files, file;
if (files && files.length > 0) {
file = files[0];
// 来在控制台看看到底这个对象是什么
// console.log(file);
// 那么我们可以做一下诸如文件大小校验的动作
if(file.size > 1024 * 1024 * 2) {
alert('图片大小不能超过 2MB!');
return false;
}
// !!!!!!
// 下面是关键的关键,通过这个 file 对象生成一个可用的图像 URL // 获取 window 的 URL 工具
var URL = window.URL || window.webkitURL;
// 通过 file 生成目标 url
var imgURL = URL.createObjectURL(file);
// 用这个 URL 产生一个 <img> 将其显示出来
$('#img').attr('src', imgURL);
}
})
</script>
<script>
var formData = new FormData();
var name = $("input").val();
formData.append("file",$("#upload")[0].files[0]);
formData.append("name",name);
$.ajax({
url : Url,
type : 'POST',
data : formData,
// 告诉jQuery不要去处理发送的数据
processData : false,
// 告诉jQuery不要去设置Content-Type请求头
contentType : false,
beforeSend:function(){
console.log("正在进行,请稍候");
},
success : function(responseStr) {
if(responseStr.status===0){
console.log("成功"+responseStr);
}else{
console.log("失败");
}
},
error : function(responseStr) {
console.log("error");
}
});
</script>
h5图片展示和ajax上传的更多相关文章
- 图片预览(base64和blob:图片链接)和ajax上传、下载(带进度提示)
直接上代码 html和js <!DOCTYPE html> <html> <head> <meta name="viewport" con ...
- 前端借助dom-to-image把HTML转成图片并通过ajax上传到服务器
之前接到了一个任务,把jsp中的table转成一个图片,保存在指定文件夹并显示在前端. 我的思路是:一.引用第三方js在前端把table转成图片 二.通过ajax把图片上传到服务器,保存在指定文件夹 ...
- H5-FileReader实现图片预览&Ajax上传文件
图片预览 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- h5可预览 图片ajax上传 ,后台有点弱不知道数据怎么取,但是可以肯定数据上传成功了
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 基于HTML5的可预览多图片Ajax上传
一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如f ...
- 基于HTML5和JSP实现的图片Ajax上传和预览
本文对如何实现使用Ajax提交"multipart/form"格式的表单数据,已经如何在图片上传之前,在浏览器上进行预览.使用的主要相关技术HTML5的FILE API,XMLHt ...
- HTML5可预览多图片ajax上传(使用formData传递数据)
HTML5可预览多图片ajax上传(使用formData传递数据) 在介绍上传图片之前,我们简单的来了解下FormData的基本使用:介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是a ...
- 框架基础:ajax设计方案(三)---集成ajax上传技术
之前发布了ajax的通用解决方案,核心的ajax发布请求,以及集成了轮询.这次去外国网站逛逛,然后发现了ajax level2的上传文件,所以就有了把ajax的上传文件集成进去的想法,ajax方案的l ...
- 前端通信:ajax设计方案(三)--- 集成ajax上传技术
在此之前让我感慨一下现在的前端开发的氛围.我遇到好多人,给我的观念都是,这个东西这个框架有了,那个东西那个框架做了,前端嘛,学几个框架,这个拼凑一下那个拼凑一下就好了.其实我想问,东西都框架做了,那你 ...
随机推荐
- [drf]访问文档出现错误'AutoSchema' object has no attribute 'get_link'
报错 'AutoSchema' object has no attribute 'get_link' 解决 参考 REST_FRAMEWORK = { 'DEFAULT_SCHEMA_CLASS': ...
- ORA-00904: "B"."METHOD": 标识符无效,00904. 00000 - "%s: invalid identifier"
1 SELECT COUNT(1) FROM (SELECT a.id AS "id", a.district AS "district", a.company ...
- http常见状态码分析
200:这个是最常见的http状态码,表示服务器已经成功接受请求,并将返回客户端所请求的最终结果 301:客户端请求的网页已经永久移动到新的位置,当链接发生变化时,返回301代码告诉客户端链接的变化, ...
- Access denied for user XX
解决方法:将pom.xml中的mysql-connector-java降低版本(直接去maven仓库复制:https://mvnrepository.com/),比如: <!-- https:/ ...
- [笔记] 使用frp从外网访问内网
之前尝试过otunnel,也记录过使用方法,见[笔记] 使用otunnel从外网访问内网,但是用了几天发现还是不够稳定. 然后尝试frp,发现性能稳定,够用,将过程及配置分享在这里吧. 需求 内网机器 ...
- charles破解https请求
当你的app包从http升级到https的时候,是不是忽然间发现你的请求抓不到了呢?别担心,只是因为你们的app加密升级了,但是我们还是可以正常破解的.接下来直接谈破解步骤啦: 1:首先打开charl ...
- cryptopp 加密库的安装
今天 在搭建环境的过程中遇到一个问题:C++ 的加密库 crypto在新系统中没有安装,于是百度一下,顺便解决问题 1.开源包下载 下载地址:https://www.cryptopp.com/#dow ...
- appium环境搭建步骤
前提条件是:搭建selenium环境(侵权删) 1.安装jdk,配置环境变量: JAVA_HOME C:\Program Files\Java\jdk1.8.0_60(jdk的存放路径) CLASSP ...
- 第三周课程总结&实验报告一
实验一 Java开发环境与简单Java程序 一.实验目的 熟悉JDK开发环境 熟练掌握结构化程序设计方法 二.实验内容 1.在此处输入标题打印输出所有的"水仙花数",所谓" ...
- 纯前端表格控件SpreadJS V12.1 隆重登场,专注易用性,提升用户体验
一款优秀的开发工具,在更新迭代中,除了要满足不同场景的业务需求,也需不断优化已有功能,尤其是细节方面,要能为用户带来使用体验和开发效率的提升. 作为一款备受业界专家和开发者认可的纯前端类Excel ...