.js进行图片预览 使用input标签来选择图片，使用FileReader读取图片并转成base64编码，然后发送给服务器。

<html>

<body>

 <img id="image"src=""/>

<br/>

 <input type="file"onchange="selectImage(this);"/>

<br/>

 <input type="button"onclick="uploadImage();"value="提交"/>

<script>

 var image = '';

 function selectImage(file){

 if(!file.files || !file.files[0]){

return;

}

 var reader = new FileReader();

 reader.onload = function(evt){

 document.getElementById('image').src = evt.target.result;

 image = evt.target.result;

}

reader.readAsDataURL(file.files[0]);

}

 function uploadImage(){

$.ajax({

type:'POST',

 url: 'ajax/uploadimage', 

 data: {image: image},

 async: false,

 dataType: 'json',

 success: function(data){

if(data.success){

alert('上传成功');

}else{

alert('上传失败');

}

},

 error: function(err){

alert('网络故障');

}

});

}

</script>

 <script src="jquery-1.11.1.min.js"></script>

</body>

</html>

js 实现 一张图片的上传的更多相关文章

  1. 通过修改ajaxFileUpload.js实现多图片动态上传并实现预览

    参考:http://smotive.iteye.com/blog/1903606 大部分我也是根据他的方法修改的,我也要根据name实现动态的多文件上传功能,但是有个问题使我一直无法实现多文件上传. ...

  2. JS打开摄像头并截图上传

    直入正题,JS打开摄像头并截图上传至后端的一个完整步骤 1. 打开摄像头主要用到getUserMedia方法,然后将获取到的媒体流置入video标签 2. 截取图片主要用到canvas绘图,使用dra ...

  3. Selenium常用API用法示例集----下拉框、文本域及富文本框、弹窗、JS、frame、文件上传和下载

    元素识别方法.一组元素定位.鼠标操作.多窗口处理.下拉框.文本域及富文本框.弹窗.JS.frame.文件上传和下载 元素识别方法: driver.find_element_by_id() driver ...

  4. 用js实现预览待上传的本地图片

    js实现预览待上传的本地图片,代码如下: <form name="form5" id="form5" method="post" ac ...

  5. php和js实现文件拖拽上传

    Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...

  6. Node + js实现大文件分片上传基本原理及实践(一)

    _ 阅读目录 一:什么是分片上传? 二:理解Blob对象中的slice方法对文件进行分割及其他知识点 三. 使用 spark-md5 生成 md5文件 四. 使用koa+js实现大文件分片上传实践 回 ...

  7. Js 之移动端图片上传插件mbUploadify

    一.下载 https://pan.baidu.com/s/1NEL4tkHoK4ydqdMi_hgWcw 提取码:vx7e 二.Demo示例 <div class="weui_uplo ...

  8. js 实现 input file 文件上传

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...

  9. 前端使用 js 如何实现大文件上传

    前端使用 js 如何实现大文件上传 大文件上传 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!

随机推荐

  1. C primer plus 5 读书笔记2

    1..字符串的输入:scanf()在读入时,当遇到空白字符空格blank.制表符tab.换行符newline时停止读取.一般使用gets(),来输入字符串. 2.strlen(),一字符为单位输出输出 ...

  2. 基于Jquery实现省份、城市、区县三级联动

    前端感觉写的比较少,也是为了练手,下午没事用来写了这个三级联动,也是第一次写这东西. 据我了解,城市信息可以选择存在数据库或者直接写在前端,为了省事,我直接写在前端,下面是我的代码: <!DOC ...

  3. L198

    One of the most common birth defects throughout the world is a cleft lip. Babies born with a cleft l ...

  4. C++ 4 种具有更 为准确语义的新强制转换类型

    1. static_cast<T>() 可用于把指向A 的指针强制转换为指向B 的指针,其约束条件是类B必须是类A的子类.例如:A *obj = new B;B *b = static_c ...

  5. springboot整合mybatis增删改查（二）：springboot热部署

    SpringBoot整合热部署 传统情况下, 我们用idea运行springboot程序时, 如果我们需要修改类里的方法,或者其他信息 我们需要修改完保存,并且重启springboot,有时候会很浪费 ...

  6. 使用docker 部署graylog集群

    graylog 相比elk 有比较简单的方面,使用简单,配置简单,可视化工具是一体化的,比较方便 搭建使用docker,多主机部分,结合docker-compose 进行管理 具体docker 配置文 ...

  7. Mybatis 全局配置文件中typeAliases(别名)

    在具体的mapper.xml文件中,定义很多的statement,statement需要parameterType指定输入参数的类型.需要resultType指定输出结果的映射类型. 如果在指定类型时 ...

  8. python学习日志

    马上就中秋节,想着再学点新的知识,本来想去继续研究前端知识来着,但是内个烦人的样式css还有js搞的有点脑壳头,以后就主学后端吧,要去死了前端这条心了? 那么寻寻觅觅就入坑最近几年大热的python吧 ...

  9. ToastUtil

    将Toast的调用封装成一个接口,写在一个公共的类当中 public class Util { private static Toast toast; public static void showT ...

  10. springboot 整合 elasticsearch

    1引入jar包 <!--elasticsearch--> <dependency> <groupId>org.springframework.boot</gr ...