.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. web——自己实现一个淘宝购物车页面

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  2. Python3 运算符（八）

    什么是运算符? 举个简单的例子 4 +5 = 9 . 例子中,4 和 5 被称为操作数,"+" 称为运算符. Python语言支持以下类型的运算符: 算术运算符 比较(关系)运算符 ...

  3. Python3 字符串（七）

    字符串是 Python 中最常用的数据类型.我们可以使用引号( ' 或 " )来创建字符串. 创建字符串很简单,只要为变量分配一个值即可. python中单引号和双引号使用完全相同. 使用三 ...

  4. c# 通过文件夹共享复制文件到服务器

    public static string[] GetFileNames(string directoryPath, string searchName) { return Directory.GetF ...

  5. 回首C语言关键字（~回首向来萧瑟处~）

    开篇废话: 本文意在回顾 C 语言中的关键字,整理文件发现当时做的这些笔记还是蛮用心的,有临摹 前辈的足迹也有自己的理解和体会.时至今日2018已经跨过一半,对不起过去半年,今天 拿这篇关键字开篇,开 ...

  6. yaf路由配置规则

    使用框架的默认路由来访问的时候,会遇到一些困扰,这部分无法查看源代码,只能通过猜测来分析. 如果项目有多个模块,显然使用yaf的默认的静态路由是无法满足需求的. yaf默认的配置是着这样的: appl ...

  7. python的pip源在windows和linux修改

    windows和linux修改python的pip源 https://www.cnblogs.com/cwp-bg/p/8497075.html windows和linux修改python的pip源 ...

  8. CH1808 Milking Grid

    题意 POJ2185 数据加强版 描述 Every morning when they are milked, the Farmer John's cows form a rectangular gr ...

  9. nginx中使用 md5

    core/ngx_md5.h 头文件 /* * Copyright (C) Igor Sysoev * Copyright (C) Nginx, Inc. */ #ifndef _NGX_MD5_H_ ...

  10. TCP和UDP Client 代码

    最近学习要求做网络编程,使用从网上找了一些资料,主要是网络协议的分层等通讯,你可以查看英文版的资料:CScharp网络编程英文版 下面直接给出代码吧,我想一看应该就懂. TCP Client 代码: ...