js 实现 一张图片的上传

.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>
时间: 2024-08-09 05:41:09

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

js 移动端 多图上传 预览 传给后端

HTML5定义了 FileReader 作为文件 API 的重要成员用于读取文件,根据 W3C 的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的实例拥有 4 个方法,其中 3 个用以读取文件,另一个用来中断读取.下面的表格列出了这些方法以及他们的参数和功能,需要注意的是 ,无论读取成功或失败,方法并不会返回读取结果,这一结果存储在 result 属性中. 方法名 参数 描述 abort none 中断读取 readAsBinaryString

如何解决用jquery.uploadify.js进行多文档上传会修改document的title

在dwz框架中使用了jquery.uploadify.js进行多文档上传当打开窗口后会发现document的title被无意之中修改.进行代码调试也没有发现.对swfobject进行研究也没有发现修改title的情况. 只能采用一种方式禁止修改title var oldTitle = document.title; try { document.attachEvent('onpropertychange', function(){ if (document.title != oldTitle )

JS打开摄像头并截图上传

直入正题,JS打开摄像头并截图上传至后端的一个完整步骤 1. 打开摄像头主要用到getUserMedia方法,然后将获取到的媒体流置入video标签 2. 截取图片主要用到canvas绘图,使用drawImage方法将video的内容绘至canvas中 3. 将截取的内容上传至服务器,将canvas中的内容转为base64格式上传,后端(PHP)通过file_put_contents将其转为图片 要注意的是,在chrome以外的浏览器中,使用摄像头或多或少会出现一些问题,可能也是老问题了,所以以

node.js express fs 获取已上传文件数据格式

{ "fieldName": "photo", "originalFilename": "1395130808991.jpg", "path": "tmpupload/25546-z8u01y.jpg", "headers": { "content-disposition": "form-data; name=\"photo\&

JS组件系列——Bootstrap文件上传组件:bootstrap fileinput

原文:JS组件系列--Bootstrap文件上传组件:bootstrap fileinput 前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签,效果不忍直视,于是博主下定决心要找一个好看的上传组件换掉它.既然bootstrap开源,那么社区肯定有很多关于它的组件,肯定也有这种常见的上传组件吧.经过一番查找,功夫不负有心人,还是被博主找到了这个组件:

js 实现 input file 文件上传

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery/jquery-1

微信小程序实现多张图片同时上传的方法

对于微信小程序上传图片其实很麻烦的,每次只能上传一张,所有很多朋友就会问想要多张图片上传怎么办?这里使用递归,当上传完一张图片后重新执行这个函数,直到所有的图片都上传完成后,就不再调用该函数了.具体的实现方法来为大家分享一下.示例代码如下: wx.chooseImage({success: function(res) {var tempFilePaths = res.tempFilePathswx.uploadFile({url: 'http://example.weixin.qq.com/up

js对图片进行质量压缩后上传服务器

基本的原理就是将图片格式转换成base64格式的,进行压缩,然后再转回固定格式的图片文件,大的形式是以form表单形式进行后台交互的,但里面会new一个form和一个XMLHttpRequest对象,这样可以弥补form表单提交文件没有失败返回的空缺,当限制使用jquery里的AjaxForm的时候,这也是一个很好的选择. var bl = convertBase64UrlToBlob(base64Codes); form.append("fileupload", bl, "

纯原生js移动端图片压缩上传插件

前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于jquery.zepto的(这句话似乎吐槽次数太多了...),然后我也就不吐槽了, 然后当然是自己做了,先上图: 纯原生js的移动端图片压缩上传插件,不依赖任何库 用法 在html页面中引入input标签,通过自定义属性data-LUploader绑定点击触发的标签id,写法如下: <div cla