博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
二十七、单张图片上传预览
阅读量:7125 次
发布时间:2019-06-28

本文共 1499 字,大约阅读时间需要 4 分钟。

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

你可能感兴趣的文章
HDU 2501 Tiling_easy version
查看>>
函数概述
查看>>
09-4.部署 metrics-server 插件
查看>>
使用swiper和吸顶效果代码
查看>>
安装AliSQL
查看>>
Linux下的shell编程(三)BY 四喜三顺
查看>>
[转] 一个企业的自动化测试实施真实案例
查看>>
DIV,CSS学习
查看>>
面向对象、类与对象
查看>>
java 基础随笔
查看>>
mock测试尝试
查看>>
html alert 的三种方式
查看>>
sql分页查询
查看>>
在Eclipes中查看源代码和大纲快速定位
查看>>
让技术跟英语一起牛B
查看>>
未在本地计算机上注册“microsoft.ACE.oledb.12.0”提供程序解决办法
查看>>
行内元素的行高对布局也有影响
查看>>
poj3264(简单线段树)
查看>>
锁、volatile、CAS的比较
查看>>
sql数据库查询
查看>>