JavaScript实现图片上传并预览并提交ajax

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

图片上传并预览

HTML

<div class="file-box">
  <img id="preview" />
  <input type="text" id="imgfield" class="txt" placeholder="预览">
  <input type="file" name="file" id = "input_file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" "imgPreview(this)" >
</div>

css

.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;
}

JS

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, // 告诉jQuery不要去处理发送的数据
  contentType: false, // 告诉jQuery不要去设置Content-Type请求头
  success: function (data) {
    var rs = eval("("+data+")");
    if(rs.state==1){
      tipTopShow('上传成功!');
    }else{
      tipTopShow(rs.msg);
    }
  },
  error: function (data) {
    tipTopShow("上传失败");
  }
})

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

(0)

相关推荐

  • js图片上传前预览功能(兼容所有浏览器)

    网上找到的一份文件上传前预览的代码,转自JavaScript 图片的上传前预览(兼容所有浏览器) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> #preview, .img, img { w

  • Vue.js 2.0 移动端拍照压缩图片上传预览功能

    在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方,本来移动端开发H5应用,准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用,但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题,所以最后拍照上传功能还是使用input file方式里解决的.但是内心还是不甘心的,由于项目进度推进,迭代版本,所以不得不放弃,后续可能我将此功能使用调用H5+接口实现. 首先我来讲我实现这个拍照预览压缩上传的思路,准确的说应该是拍照或选择图片压缩之后预览及上

  • AngularJS实现图片上传和预览功能的方法分析

    本文实例讲述了AngularJS实现图片上传和预览功能的方法.分享给大家供大家参考,具体如下: html5原生方法 先看一下html5原生方法上传和预览图片的实现: // <img id="img-preview"> var imgPreview = document.getElementById("img-preview"); // <input id="img-input" type="file">

  • Javascript图片上传前的本地预览实例

    图片的上传预览功能主要用于图片上传前的一个效果的预览,目前主流的方法主要有js,jquery与flash实现,但我们一般都会使用js来实现图片上传预览功能,下面来看一个例子. 原理: 分为两步:当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL):把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来. 在这里,我们需要了解Javascript里File对象.Blob对象和window.URL.createObjectURL()方法. Fil

  • js实现图片上传预览原理分析

    目前网上有很多支持图片上传时进行预览的插件,功能完备,界面优雅,使用起来也很方便.一直以来也就只是用用,没有想过这些插件背后的实现原理.趁着今天有点时间,也来学习学习. 追根溯源 设想 一开始,按照我的思路,预览可能是这么来实现的.本地选中一张图片,嵌入html的同时会显示图片的本地的绝对路径,然后通过js简单的进行设置,应该就可以实现预览效果了. 但是实际上,目前只有低版本的IE浏览器才能实现这么个效果.究其原因是浏览器厂商为了进一步强化安全,限制了file标签直接读取本地路径的能力,在HTM

  • js实现图片上传并预览功能

    本文为大家分享了js实现图片上传并预览的具体代码,供大家参考,具体内容如下 思路:完成这个功能,首先需要美化上传图片的按钮,然后添加一个<img/>标签,在图片上传之后,用新图片的src替换原来<img/>标签中的src. 如下图所示,是原始的按钮样式: 美化步骤: (1)将上传图片标签采用绝对定位,使之位于一个图片,按钮,div等标签上.或者给图片,按钮或div设置绝对定位,总之,是要让上传文件按钮和用户指定的按钮重合. (2)给上传图片标签设置大大小,使之和与它重叠的图片,按钮

  • 兼容IE和FF的图片上传前预览js代码

    效果图如下:  代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta

  • 图片上传之前检查大小、尺寸、格式并预览的js代码

    下面的代码,需要保存到本地种执行,在线看不到实际效果. validate before upload by Lance Zhang File type :gif,jpg,jpeg,png,bmp File Size limit: K Image Height Limit: Image Width Limit: Image Preview function CheckFileSize() { var limit = document.getElementById("fileSizeLimit&qu

  • js前端实现多图图片上传预览的两个方法(推荐)

    一.将图片转成icon码的实现方式 html代码: <div class="yanzRight"> <input style="margin-top:5px;float: left;" id="st18" name="evidence" onchange="previewImage(this,5)" type="file"/> <span class=&qu

  • vue.js 图片上传并预览及图片更换功能的实现代码

    这里讲解是图片上传和图片预览.主要是围绕我们常用功能的列子做讲解 ,并且没有格外引入其他js 所以你复制过去做简单修改便可以看到效果 效果图: 样式以及效果图一并展示 1.HTML <div class="rz-picter"> <img :src="avatar" class="img-avatar"> <input type="file" name="avatar" id=

随机推荐