.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. 网络流量预测 国内外研究现状【见评论】——传统的ARIMA、HMM模型，目前LSTM、GRU、CNN应用较多，貌似小波平滑预处理步骤非常关键

    Time Series Anomaly Detection in Network Traffic: A Use Case for Deep Neural Networks from:https://j ...

  2. Java 调用 php接口（Ajax）（二）

    由于项目里面需要用到Java调用PHP的充值接口,所以学习了一下,以下这个Demo是个小小的例子,写下来做个笔记> jsp页面: <%@ page language="java& ...

  3. html和js实现滚动条效果

    HTML部分 <!-- 遮罩层 --> <div id="zzc" style="z-index:-1;height:100%;width: 100%; ...

  4. idea如何热部署（转）

    IntelliJ IDEA 怎么热部署,每次修改java文件就得重启tomcat  原文链接:http://blog.csdn.net/dandandeshangni/article/details/ ...

  5. 如何判断SSD盘

    1.判断cat /sys/block/*/queue/rotational的返回值.如果返回1则表示磁盘可旋转,可以判断是HDD:反之,如果返回0,则表示磁盘不可以旋转,就有可能是SSD. 注意:/s ...

  6. 6.4-6.5 使用form表单验证，完善登录页面

    之前是使用自定义的类来实现登录逻辑,现在使用django内置的form表单验证,用继承django的view来实现登录页面. users > views.py 的内容是: from django ...

  7. Git 之 git原理简介

    这里只是很简单.超简单的介绍下git,为的是方便记忆: 本地仓库分为三个部分:工作区.暂存区.仓库区,其中暂存区和仓库区属于版本区. 对于文件的操作,需要从工作区----> 暂存区 ----&g ...

  8. POJ2728 Desert King 最优比率生成树

    题目 http://poj.org/problem?id=2728 关键词:0/1分数规划,参数搜索,二分法,dinkelbach 参考资料:http://hi.baidu.com/zzningxp/ ...

  9. DesignPattern（一）设计模式的六个基本原则

    使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替原则.依赖倒置原则.接口隔离原则. ...

  10. html css 怎么使img和a标签在一个行内元素中间对齐

    答案是:#box ul.games li img{vertical-align: middle;} 这行很重要哦. <div id="box"> <div cla ...