1. <img src="" id="img"/>
  2. <script src="http://static.lamian.tv//pc/public/js/jquery-1.8.3.min.js?v=e128811631"></script>
  3. <script>
  4.  
  5. $('#file').change(function (e) {
  6. console.log(event.target.files);
  7. var files = event.target.files, file;
  8. if (files && files.length > 0) {
  9. file = files[0];
  10. // 来在控制台看看到底这个对象是什么
  11. // console.log(file);
  12. // 那么我们可以做一下诸如文件大小校验的动作
  13. if(file.size > 1024 * 1024 * 2) {
  14. alert('图片大小不能超过 2MB!');
  15. return false;
  16. }
  17. // !!!!!!
  18. // 下面是关键的关键,通过这个 file 对象生成一个可用的图像 URL
  19.  
  20. // 获取 window 的 URL 工具
  21. var URL = window.URL || window.webkitURL;
  22. // 通过 file 生成目标 url
  23. var imgURL = URL.createObjectURL(file);
  24. // 用这个 URL 产生一个 <img> 将其显示出来
  25. $('#img').attr('src', imgURL);
  26. }
  27. })
  28. </script>
  1. <script>
  2. var formData = new FormData();
  3. var name = $("input").val();
  4. formData.append("file",$("#upload")[0].files[0]);
  5. formData.append("name",name);
  6. $.ajax({
  7. url : Url,
  8. type : 'POST',
  9. data : formData,
  10. // 告诉jQuery不要去处理发送的数据
  11. processData : false,
  12. // 告诉jQuery不要去设置Content-Type请求头
  13. contentType : false,
  14. beforeSend:function(){
  15. console.log("正在进行,请稍候");
  16. },
  17. success : function(responseStr) {
  18. if(responseStr.status===0){
  19. console.log("成功"+responseStr);
  20. }else{
  21. console.log("失败");
  22. }
  23. },
  24. error : function(responseStr) {
  25. console.log("error");
  26. }
  27. });
  28. </script>

h5图片展示和ajax上传的更多相关文章

  1. 图片预览(base64和blob:图片链接)和ajax上传、下载(带进度提示)

    直接上代码 html和js <!DOCTYPE html> <html> <head> <meta name="viewport" con ...

  2. 前端借助dom-to-image把HTML转成图片并通过ajax上传到服务器

    之前接到了一个任务,把jsp中的table转成一个图片,保存在指定文件夹并显示在前端. 我的思路是:一.引用第三方js在前端把table转成图片 二.通过ajax把图片上传到服务器,保存在指定文件夹 ...

  3. H5-FileReader实现图片预览&Ajax上传文件

    图片预览 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  4. h5可预览 图片ajax上传 ,后台有点弱不知道数据怎么取,但是可以肯定数据上传成功了

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 基于HTML5的可预览多图片Ajax上传

    一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如f ...

  6. 基于HTML5和JSP实现的图片Ajax上传和预览

    本文对如何实现使用Ajax提交"multipart/form"格式的表单数据,已经如何在图片上传之前,在浏览器上进行预览.使用的主要相关技术HTML5的FILE API,XMLHt ...

  7. HTML5可预览多图片ajax上传(使用formData传递数据)

    HTML5可预览多图片ajax上传(使用formData传递数据) 在介绍上传图片之前,我们简单的来了解下FormData的基本使用:介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是a ...

  8. 框架基础:ajax设计方案(三)---集成ajax上传技术

    之前发布了ajax的通用解决方案,核心的ajax发布请求,以及集成了轮询.这次去外国网站逛逛,然后发现了ajax level2的上传文件,所以就有了把ajax的上传文件集成进去的想法,ajax方案的l ...

  9. 前端通信:ajax设计方案(三)--- 集成ajax上传技术

    在此之前让我感慨一下现在的前端开发的氛围.我遇到好多人,给我的观念都是,这个东西这个框架有了,那个东西那个框架做了,前端嘛,学几个框架,这个拼凑一下那个拼凑一下就好了.其实我想问,东西都框架做了,那你 ...

随机推荐

  1. 利用Viewpager和Fragment实现UI框架的搭建实现

    package com.loaderman.uiframedemo; import android.os.Bundle; import android.support.v4.app.Fragment; ...

  2. JetBrain系列学生免费授权

    1.访问网址:https://www.jetbrains.com/zh/student/ 2.往下滚动,点击立即申请 3.填写邮箱信息 4.确认后,跳转到Thank you页面,上面说已经给注册邮箱发 ...

  3. Python中针对函数处理的特殊方法

    Python中针对函数处理的特殊方法 很多语言都提供了对参数或变量进行处理的机制,作为灵活的Python,提供了一些针对函数处理的特殊方法 filter(function, sequence):对se ...

  4. SAS数据挖掘实战篇【三】

    SAS数据挖掘实战篇[三] 从数据挖掘概念到SAS EM模块和大概的流程介绍完之后,下面的规划是[SAS关联规则案例][SAS聚类][SAS预测]三个案例的具体操作步骤,[SAS的可视化技术]和[SA ...

  5. Window Relationships and Frames

    If a page contains frames, each frame has its own window object and is stored in the frames collecti ...

  6. SqlServer:SqlServer(xpath,字段约束,时间查询,数据文件查询及还原,压缩备份)

    1.xpath --1.文档 select @data --2.任意级别是否存在price节点 select @data.exist('//price') --3.获取所有book节点 select ...

  7. keys随机生成

    随机keys生成 const fs=require('fs'); const KEY_LEN=1024; const KEY_COUNT=2048; const CHARS='abcdefghijkl ...

  8. AI测试——旅程的终点

    在2019年6月,我产生了一个想法,即人工智能探索测试AIET(Artificial intelligence exploration test),大概用了一周时间来思考怎么把人工智能应用到测试领域, ...

  9. mybatis学习 (五) POJO的映射文件

    Mapper.xml映射文件中定义了操作数据库的sql,每个sql是一个statement,映射文件是mybatis的核心. 1.parameterType(输入类型) 通过parameterType ...

  10. aws 预留实例到期监控

    环境准备 安装python的aws 开发工具包 pip install boto3 配置aws账号 [root@zabbix service]# aws configure AWS Access Ke ...