php单图上传并预览,JavaScript实现单图片上传并预览功能

本文实例为大家分享了JavaScript实现单图片上传并预览功能的具体代码，供大家参考，具体内容如下

单图片上传并实现预览

/*上传图片*/

.addPerson{

line-height: 190px;

}

.addPhoto{

width: 50px;

height: 50px;

line-height: 50px;

font-size: 40px;

text-align: center;

vertical-align: middle;

border: 1px dashed #e7eaec;

cursor: pointer;

display: inline-block;

}

.addinput{

display: none;

}

.addShow{

width: 200px;

height: 170px;

display: inline-block;

vertical-align: middle;

background: #f3f3f48f;

margin-left: 30px;

}

.addShow img{

width: 130px;

height: 130px;

margin: 20px auto;

display: block;

}

图片上传

$(".addPhoto").click(function () {

$('[type=file]').click();

});

function previewFile() {

var preview = document.getElementsByClassName("addImg")[0];

var file = document.getElementsByClassName('addFile')[0].files[0];

var reader = new FileReader();

reader.addEventListener("load", function () {

preview.src = reader.result;

}, false);

if (file) {

reader.readAsDataURL(file);

}

// ajax请求如下

// 使用FormData将图片以文件的形式传到后台

// pictureFile后台接收的参数

// var formdata=new FormData();

// formdata.append("pictureFile",addFile);

// $.ajax({

// url:"",

// type:"post",

// dataType:"json",

// data:formdata,

// async: false, //四个false属性不能少

// cache: false,

// contentType: false,

// processData: false,

// success:function (data) {

// if(data.success){

// myAlert(data.msg);

// }

// },

// error:function () {

// if(data.success){

// myAlert(data.msg);

// }

// })

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

php单图上传并预览,JavaScript实现单图片上传并预览功能相关推荐

ajax文件插件上传,7 款基于 JavaScript/AJAX 的文件上传插件
本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传拖拽操作实时上传进度自定义上传限制希望能为你的开发工作带来帮助. 具有多文件上传.拖 ...
java实现文件上传预览_jsp+springmvc实现文件上传、图片上传和及时预览图片
1.多文件上传:http://blog.csdn.net/a1314517love/article/details/24183273 2.单文件上传的简单示例:http://blog.csdn.net ...
JavaScript相册单图放大预览
源码下载 JavaScript相册单图放大预览第二版(js控制图片上下居中) 已实现原生Js.jQuery2种方式 zoomify css:.zoomify img{ cursor: pointer; ...
百度上传插件 Web Uploader 使用之单图片上传
java springmvc 使用Web Uploader 上传单张图片今天小组长让我完成一个图片上传的功能,并丢给了我一个百度上传的插件 WebUpload .由于是第一次使用该插件,所以先在本地 ...
php js 异步上传图片,javascript实现异步图片上传方法实例
如何通过javascript写出异步图片上传?本文我们就和大家分享一些实例代码javascript实现异步图片上传.我们首先看下HTML代码实现的form提交部分.其中大家在测试的时候需要把test的 ...
java文件异步上传_[Java教程]原生javascript实现文件异步上传
[Java教程]原生javascript实现文件异步上传 0 2017-10-25 19:00:06 效果图: 代码:(demo33.jsp) demo33.jsp名称文件确定本文网址:http:/ ...
JavaScript 文件拖拽上传插件 dropzone.js 介绍
dropzone.js 是一个开源的 JavaScript 库,提供 AJAX 异步上传功能. 安装下载dropzone.js文件并添加到页面中即可.Dropzone 不依赖 jQuery 框架. ...
JavaScript实现限制文件上传类型和大小
JavaScript实现限制文件上传类型和大小 <title>文件上传前台控制检测程序 v0.6</title> <style>body,td {font-size ...
JavaScript之实现文件上传与下载
前段时间做视频上传业务,通过网页上传视频到服务器. 视频大小小则几十M,大则 1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题:1,文件过大,超出服务端的请求大小限制:2,请求时间过长, ...

php单图上传并预览,JavaScript实现单图片上传并预览功能

php单图上传并预览,JavaScript实现单图片上传并预览功能相关推荐

最新文章

热门文章