alert("抱歉,你的浏览器不支持 FileReader");

input.setAttribute(‘disabled‘,‘disabled‘);

}else{

input.addEventListener(‘change‘,readFile,false);

}functionreadFile(){

fd= newFormData();var iLen = this.files.length;for(var i=0;i

return alert("上传的图片格式不正确,请重新选择");

}var reader = newFileReader();

fd.append(i,this.files[i]);

reader.readAsDataURL(this.files[i]); //转成base64

reader.fileName = this.files[i].name;

reader.οnlοad= function(e){var imgMsg ={

name :this.fileName,//获取文件名

base64 : this.result //reader.readAsDataURL方法执行完后,base64数据储存在reader.result里

}

dataArr.push(imgMsg);

result= ‘

delete

‘;var div = document.createElement(‘div‘);

div.innerHTML=result;

div[‘className‘] = ‘float‘;

document.getElementsByTagName(‘body‘)[0].appendChild(div);   //插入dom树

var img = div.getElementsByTagName(‘img‘)[0];

img.οnlοad= function(){var nowHeight = ReSizePic(this); //设置图片大小

this.parentNode.style.display = ‘block‘;var oParent = this.parentNode;if(nowHeight){

oParent.style.paddingTop= (oParent.offsetHeight - nowHeight)/2 + ‘px‘;

}

}

div.οnclick= function(){

$(this).remove(); //在页面中删除该图片元素

}

}

}

}/*function send(){

var submitArr = [];

$(‘.subPic‘).each(function () {

submitArr.push({

name: $(this).attr(‘alt‘),

base64: $(this).attr(‘src‘)

});

}

);

$.ajax({

url : ‘http://123.206.89.242:9999‘,

type : ‘post‘,

data : JSON.stringify(submitArr),

dataType: ‘json‘,

//processData: false, 用FormData传fd时需有这两项

//contentType: false,

success : function(data){

console.log(‘返回的数据:‘+JSON.stringify(data))

}

})

}*/

/*oSelect.οnclick=function(){

oInput.value = ""; // 先将oInput值清空,否则选择图片与上次相同时change事件不会触发

//清空已选图片

$(‘.float‘).remove();

oInput.click();

}

oAdd.οnclick=function(){

oInput.value = ""; // 先将oInput值清空,否则选择图片与上次相同时change事件不会触发

oInput.click();

}

oSubmit.οnclick=function(){

if(!dataArr.length){

return alert(‘请先选择文件‘);

}

send();

}*/}/*用ajax发送fd参数时要告诉jQuery不要去处理发送的数据,

不要去设置Content-Type请求头才可以发送成功,否则会报“Illegal invocation”的错误,

也就是非法调用,所以要加上“processData: false,contentType: false,”

**/

functionReSizePic(ThisPic) {var RePicWidth = 200; //这里修改为您想显示的宽度值

var TrueWidth = ThisPic.width; //图片实际宽度

var TrueHeight = ThisPic.height; //图片实际高度

if(TrueWidth>TrueHeight){//宽大于高

var reWidth =RePicWidth;

ThisPic.width=reWidth;//垂直居中

var nowHeight = TrueHeight * (reWidth/TrueWidth);

return nowHeight; //将图片修改后的高度返回,供垂直居中用

}else{//宽小于高

var reHeight =RePicWidth;

ThisPic.height=reHeight;

}

}

html实现多图片上传并预览,【前端预览】实现多张上传图片预览查看相关推荐

  1. html显示数据库图片django,django将图片上传数据库后在前端显式的方法

    1.使用ImageField先安装pillow模块 pip install pillow 2.在app的models中设置 class Image(models.Model): pic_name=mo ...

  2. 微信小程序图片上传到服务器再自动替换,微信小程序批量上传图片到服务器,并实现预览,删除功能...

    js代码 Page({ /** 页面的初始数据 / data: { files: [], //门店图片信息,数组图片保存作为数据源 }, /* 多图片上传 */ chooseImage: functi ...

  3. 若依图片上传到服务器,前端显示图片

    效果图如下: 前端代码: //-----------table显示图片<el-table-column label="图片地址" align="center&quo ...

  4. 图片上传组件_博客必备功能,拖拽上传图片!

    公众号关注 "GitHub 热门" 设为 "星标",带你了解技术圈内热门新鲜事! 现在很多小伙伴都在搭建自己的博客,把自己的一些心得和经验都写在博客上面给一些新 ...

  5. java 微信图片上传_微信小程序图片上传java端以及前端实现

    小程序的图片上传与传统的图片上传方式有一些不一样 如果你有幸看到这篇文章,恭喜你,你可以完美解决了. 话不多说,前后端代码一并奉上: (基于springmvc ) @Controller @Reque ...

  6. js将图片上传服务器文件夹下,Egg.js 实现向服务器上传图片

    1.安装时间处理 及 压缩 模块 yarn add silly-datetime pump 2.文件保存路径 config/config.default.js config.uploadDir = ' ...

  7. java将图片上传数据库_〔技巧实例〕轻松实现将上传图片到数据库

    很久就想自己写一写程序了,不过由于赖就不想写我,今天刚好有空,所以写了这个小小的程序很容易一看就知道的,不多说了就此开始: 我们做一个上传的.数据据库的字段就id自动编号 big 字段类型是 OLE ...

  8. ASP.Net MVC3 图片上传详解(form.js,bootstrap)

    图片上传的插件很多,但很多时候还是不能切合我们的需求,我这里给大家分享个我用一个form,file实现上传四张图片的小demo.完全是用jquery前后交互,没有用插件. 最终效果图如下: 玩过花田人 ...

  9. 【前后端分离项目实现图片上传】

    前后端分离项目实现图片上传 后端业务代码 前端部分 实例 以样例的形式来展示:其中包括前台获得数据进行显示时图片的处理:以及上传图片时的处理: 后端业务代码 @RestController @Requ ...

  10. 微信头像单张图片上传

    后台配置 public function upload_img($img){import('ORG.Tencent.Weixin');$wx = new Weixin(get_app_config() ...

最新文章

  1. openmv4闪灯说明_OpenMV Cam
  2. android eng 模式,android 4.0 编译模式 eng - user 时遇到的有关问题
  3. mysql pt_MySQL慢查询之pt-query-digest分析慢查询日志
  4. Nginx(二):安装、配置、常用命令
  5. TC第一次成为room leader
  6. BUG缺陷管理工具--测试用例执行
  7. SQLite指南(5) - PRAGMA命令用法(完整)
  8. jeb配置java环境_jeb 提示 java help space
  9. 如何做好BI项目的规划与实施方案?
  10. python高级篇----网络编程与爬虫
  11. smartbi v7 Linux,配置Smartbi
  12. 【Lucene】挖掘相关搜索词
  13. jQuery事件绑定与解绑
  14. pageContext
  15. Git安装教程(Windows安装超详细教程)
  16. ESP32公网对讲机
  17. One Chin Per Person
  18. Linux查看占用内存最高的进程
  19. 基于CectOS7利用docker搭建Vulhub漏洞靶机环境
  20. rasp完整搭建方案

热门文章

  1. R语言开发之CSV文件的读写操作了解下
  2. 云ERP如何助力企业管理?ERP上云的好处
  3. PICT测试工具的安装及使用
  4. ANSYS Workbench 16 - 黄志新(图书阅读总结)
  5. 软件魔方制作系统启动盘并安装win7系统
  6. 李大齐称“新女友”只是力捧选手:我要保护她
  7. 多少人败给了一个字:等……
  8. 谷物调节肠道菌群,促进代谢健康
  9. GraphQL的探索之路 – 一种为你的API而生的查询语言 - 第314篇
  10. 有哪门语言是所有优秀程序员都应该无差别掌握的?