js
//html
<input id="uploadP" name="picture" accept="image/*" type="file" style="display: none" />
<div class="fmpicture" onclick="addPricture();"><img id="fm_pictrue" style="width: 100%;height: 100%;border: 0px" onclick="addPricture()"></div>
// js 添加图片
function addPricture(){
$("#uploadP" ).click(); //隐藏了input:file样式后,点击头像就可以本地上传
$("#uploadP" ).on("change",function(){
var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径,该路径不是图片在本地的路径
if (objUrl) {
$("#fm_pictrue" ).attr("src", objUrl) ; //将图片路径存入src中,显示出图片
}
});
}
// 获得图片路径方法
function getObjectURL(file) {
var url = null ;
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 ;
}
上传方式就随意了 ajax上传 或者别的 分享个最墨迹也是最简单的
var formData = new FormData();
formData.append('id',12345);
formData.append('prcture', $('#uploadP' )[0].files[0]); //添加图片信息的参数
$.ajax({
url:'${baseurl}/console/dic/wareslist/addOrUpdate',
type: 'POST',
cache: false, //上传文件不需要缓存
data: formData,
async: false,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success: function (data) {
if(data != null){
$('#dlg_addorupdate').dialog('close');
var msg = data.operatemessage;
if(msg!=""){
$.messager.alert('提示',msg,'info',function(){});
}
if(data.operateresult == "1"){
$("#dg_warelist").datagrid('reload');
}
}
}
})