.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. API To Import Negotiations(转)

    原文地址 API To Import Negotiations

  2. MySQL重装

    一.在控制面板中卸载程序 二.找到安装目录,删除掉剩余的文件,一般在C:\Program Files\MySQL\和C:\ProgramData\MySQL\ 三.清理注册表,在“运行”里键入rege ...

  3. IOS-CoreData（增删改查、表关联、分页和模糊查询、多个数据库）

    1>什么是CoreData Core Data是iOS5之后才出现的一个框架,它提供了对象-关系映射(ORM)的功能,即能够将OC对象转化成数据,保存在SQLite数据库文件中,也能够将保存在数 ...

  4. iOS UI-线程（NSThread）及其安全隐患与通信

    一.基本使用 1.多线程的优缺点 多线程的优点 能适当提高程序的执行效率 能适当提高资源利用率(CPU.内存利用率) 多线程的缺点 开启线程需要占用一定的内存空间(默认情况下,主线程占用1M,子线程占 ...

  5. angular的中文文档在这里。。

    链接 仿ant-design的  angular组件 echarts文档

  6. ubuntu16切换hosts软件安装

    之前用ubuntu切换hosts以为没有软件可用,直接用cp来替换hosts文件,今天网上搜了一下发现一个软件和window上用的切hosts功能一样,而且可以支持linux,mac,windows. ...

  7. Windows7 SP1 64bit配置IIS7.5和ASP.NET4

    一.安装前的环境 1. Windows7 SP1 64bit: 2. 在安装IIS7.5之前,安装了Visual Studio 2010或.NET Framework4: 二.安装IIS7.5 1.  ...

  8. 414 - Machined Surfaces

    Sample Input (character "B" for ease of reading. The actual input file will use the ASCII- ...

  9. koa/koa2项目搭建

    一键生成koa/koa2项目: 1. npm install -g koa-generator 2.新建项目目录 koa mytest (koa1项目) koa2 koa2test (koa2项目) ...

  10. Nginx获取自定义头部header的值

    http://blog.csdn.net/xbynet/article/details/51899286?_t=t http://shift-alt-ctrl.iteye.com/blog/23314 ...