.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. 《BAT前端进阶[师徒班]》学习总结

    这是一个培训课 是的,这是一个面向中级前端的培训班,但明显跟传统的填鸭式培训班不太一样.这边的老师都是大牛这是毫无疑问的,而且都是一线开发人员.而且课程一开始就说明了面向了是有1-3年有工作经验的前端 ...

  2. Word 开发资料集合

    Word 对象模型概述  https://msdn.microsoft.com/zh-cn/library/kw65a0we.aspx DSOframer微软官方API的查阅方法  http://sh ...

  3. 快速切题 poj 2996 Help Me with the Game 棋盘 模拟 暴力 难度:0

    Help Me with the Game Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 3510   Accepted:  ...

  4. hdu 6144 Arithmetic of Bomb

    Arithmetic of Bomb Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  5. tar格式 方法安装MySQL后，初次登录出现 ERROR 1820 (HY000): You must reset your password using ALTER USER statement before executing this statement

    参考: https://www.cnblogs.com/kerrycode/p/4368312.html http://blog.csdn.net/u014520039/article/details ...

  6. 《DSP using MATLAB》示例 Example 9.11

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  7. cratedb geo 查询

    cratedb支持的geo 查询还相对比较全,开发基本的功能已经够用了 安装cratedb 使用docker docker run -d -p 4200:4200 crate 创建数据库 创建表 CR ...

  8. 转 HTTP/2: The Long-Awaited Sequel

    HTTP/2: The Long-Awaited Sequel Thursday, October 9, 2014 2:01 AM 6 Ready to speed things up? Here a ...

  9. table中tr间距的设定table合并单元格 colspan（跨列）和rowspan（跨行）

    table中的tr的默认display:table-row,虽然可以修改为display:block但是就失去了tr特有的显示效果,如(td自动对齐): 并且在tr中对起设定padding是有用的,可 ...

  10. centeros php 实战

    apache 默认安装路径 Fedora Core, CentOS, RHEL:ServerRoot              ::      /etc/httpdPrimary Config Fle ...