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

图片上传并预览

.file-box {

position: relative;

display: inline-block;

}

.file-box img {

width: 50px;

height: 50px;

border-radius: 50%;

position: absolute;

top: -30px;

left: 0;

display: inline-block;

border: none;

}

.file-box .txt,.file-box .file {

width: 70px;

height: 36px;

position: absolute;

top: -20px;

left: 100px;

text-align: center;

}

function imgPreview(fileDom) {

//判断是否支持FileReader

if(window.FileReader) {

var reader = new FileReader();

} else {

alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");

}

//获取文件

var file = fileDom.files[0];

var imageType = /^image\//;

//是否是图片

if(!imageType.test(file.type)) {

alert("请选择图片！");

return;

}

//读取完成

reader.onload = function(e) {

//获取图片dom

var img = document.getElementById("preview");

//图片路径设置为读取的图片

img.src = e.target.result;

};

reader.readAsDataURL(file);

}

上传图片提交ajax

如果想把图片信息通过ajax传给后端，则需要通过new FormData()上传图片信息，然后使用 append() 方法向该对象里添加字段，具体代码如下：

(注：以下代码在图片预览成功后执行，也就是在reader.readAsDataURL(file);后)

var formData = new FormData();

formData.append('file', $('#input_file')[0].files[0]); //添加图片信息的参数

formData.append('sizeid',123); //添加其他参数

$.ajax({

url: '/material/uploadFile',

type: 'POST',

cache: false, //上传文件不需要缓存

data: formData,

processData: false, // 告诉

更多精彩内容请参考专题《ajax上传技术汇总》，《javascript文件上传操作汇总》和《

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