html部分

<div class="new-store-phone">
    <span class="phone-title">营业执照&nbsp;</span>
    <div class="phone-upload">
         <input type="file" name="file" id="file" class="inputfile"  οnchange="changepic(this)" type="file" accept="image/*" />

<img src="" id="show" style="width: 100px; height: 100px;">

<label for="file" class='btn btn-success' οnchange="changepic(this)" type="file" accept="image/*">上传照片</label>
   </div>
</div>

js部分

(1)第一部分是将图片路径渲染及上传

function changepic(obj) {
//console.log(obj.files[0]);//这里可以获取上传文件的name
var newsrc = getObjectURL1(obj.files[0]);
document.getElementById('show').src = newsrc;
var imgType="storeLogo";
var data={
imgType:imgType ,
}
$.ajaxFileUpload({
url : '/tsm/upload/filesUpload',
secureuri : false, //一般设置为false
fileElementId : 'file', //文件上传空间的id属性 <input type="file" id="file" name="file" />
type : 'post',
dataType : 'json', //返回值类型 一般设置为json
data:data,
success : function(data) { //服务器成功响应处理函数
var result=data.result;
if(result==0){
var logoName=data.data[0];
$("#imgUrl1").val(logoName);
}
},

});

}

//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null;
// 下面函数执行的效果是一样的,只是需要针对不同的浏览器执行不同的 js 函数而已
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}

转载于:https://www.cnblogs.com/deng-jie/p/9370666.html

二十七、单张图片上传预览相关推荐

  1. 单张图片上传预览【超简洁,未完待续】

    http://www.cnblogs.com/ordinaryk/p/6277451.html 1.单张图片上传之前前端预览 <!DOCTYPE html PUBLIC "-//W3C ...

  2. html单张图片效果,jquery+html5实现单张图片上传预览

    js: if (window.File && window.FileReader && window.FileList && window.Blob){ ...

  3. Bootstrap 3 : 图片上传预览 image upload preview

    头部均为: <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel= ...

  4. 如何实现上传多个图片并依次展示_js前端实现多图图片上传预览的两个方法(推荐)...

    一.将图片转成icon码的实现方式 html代码: js代码 //图片预览功能 function previewImage(file,imgNum) { var MAXWIDTH = 200; var ...

  5. Angular6自定义指令实现多图片上传预览

    在做移动端开发多时候经常会遇到用户图片上传的需求,有单图片上传预览的需求,也有多图片上传预览的需求.自己刚遇到这个需求的时候有踩到各种个样到坑.经过多番尝试,下面将本人成功的一个案例分享出来(公司对外 ...

  6. php 图片上传预览(转)

    网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  7. js实现图片上传预览及进度条

    js实现图片上传预览及进度条 原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器 ...

  8. JAVA实现一个图片上传预览功能

    这个小项目主要使用java实现了一个简单的图片上传预览功能,废话不多说,先上实现成果 ^ _ ^

  9. java 图片上传 预览 demo_图片上传预览

    [实例简介] 实现图片上传预览,可以增加新的空数组,并上传和替换.还有删除功能:提交的时候,还可以判断是否有空的img [实例截图] [核心代码] 613ddc50-96b8-4197-ba2e-1e ...

最新文章

  1. 在hadoop上运行python_hadoop上运行python程序
  2. android判断以太网还是wifi,对比平台--WiFi和以太网之间的区别
  3. Python之sklearn:LabelEncoder函数简介(编码与编码还原)、使用方法、具体案例之详细攻略
  4. OpenCV运行对象检测深度学习网络的实例(附完整代码)
  5. mapstruct详解
  6. Celery的实践指南
  7. 【CodeForces - 761C】Dasha and Password (暴力可过,标解dp,字符串,有坑总结)
  8. python语言中内置的字符串排版方法_Python14之字符串(各种奇葩的内置方法)
  9. ZooKeeper监控
  10. [导入]jbuilder 2006开发struts+sqlserver2K准备工作
  11. 64位Win8企业版出现“Unknown Hard Error”系统警告的一个解决方法
  12. error: invalid new-expression of abstract class type 'Rectangle'
  13. oracle存档模式,Oracle学习系列之如何开启归档模式
  14. Tomcat修改默认主页
  15. 【嵌入式系统】STM32时钟系统+时钟配置函数解析
  16. 根据报告数据,2021 年 Q1,全球小说 App 推广榜 Top20 里面,有 11 个 App 来自中国厂商。最新版本已经上线
  17. [bzoj3123][SDOI2013]森林
  18. 教你如何提高信用额度
  19. DeepLearing:GAN生成式对抗网络
  20. 自动测试系统用什么软件,自动测试系统软件,automated test system software,音标,读音,翻译,英文例句,英语词典...

热门文章

  1. 加密芯片提升消费电子产品设备的安全性能
  2. [vb]SendMessageA函数
  3. VB:常用内部函数大全,你会了几个呢?
  4. 毁前的圆明园竟然这么美
  5. Jvm内存分析入门篇
  6. MIT自动驾驶导航系统,不看地图也能穿梭乡间野路
  7. MIT要和世界各地研究机构合作,让机器能像婴儿一样学习
  8. Waymo真·无人车上路了!没司机的出租车推出在即 | 多图实拍
  9. Python3.5.2官方文档学习备忘录
  10. iOS - Swift 与 Objective-C 互相操作