
比如你截图右侧这些文件是直接放在wwwroot目录下
那么yun4.htm里引用图片logo.gif,代码为<img src="/logo.gif">
如果你的图片logo.gif,是放在images文件夹里,那么代码为<img src="/images/logo.gif">
实际上是<img src="wwwroot/xxx/xxx">,在这个环境中wwwoot为根目录,/代表从wwwoot(根目录)开始的路径。
默认情况下kindeditor上传的图片在编辑器的根目录/attached/目录下。以日期建一个目录,然后保存文件。有些时候大概我们并不想这样。考虑到更新编辑器,或更换编辑器不太方便。比如我现在想把上传的文件保存在根目录下的uploadfiles目录下,需要修改以下代码:首先,打开文件php\upload_json.php,在大约第16行到第19行,定义了文件保存目录路径和文件保存目录URL,我们需要修改为:
//文件保存目录路径
$save_path = $_SERVER['DOCUMENT_ROOT'].'\\uploadfiles\\'
//文件保存目录URL
$save_url = '/uploadfiles/'
解释一下:$save_path 即为最后保存文件的目录。这里就是根目录下的uploadfiles
$save_url 即为上传成功后,图片的URL地址。
这样,保存地址就变成了 根目录下的 uploadfiles/年月日/xxxxx.jpg了。
产品提了一个需求,要求在一个html中实现多行多图片上传,原型图如下:
2.1 :html
html页面由前端实现,此处增加<ul><li></li></ul>是为了配合图片单击放大图片功能的实现
<ul id="ul_other">
<li><input type="file" id="file_other" class="file_input" onchange="add_file_image('other')"></li>
</ul>
2.2 :js
var imgSrc_other=[]
var imgFile_other=[]
function add_file_image(id) {
var fileList =document.getElementById("file_"+id).files// js 获取文件对象
if (verificationFile(fileList[0])){
for(var i =0i
var imgSrcI =getObjectURL(fileList[i])
if (id=="other"){
imgSrc_other.push(imgSrcI)
if(fileList[i].size/1024 >100) { //大于100kb,进行压缩上传
fileResizetoFile(fileList[i],0.6,function(res){
imgFile_other.push(res)
})
}else{
imgFile_other.push(res)
}
}
addNewContent(id)
}
}
//新增图片
function addNewContent(obj) {
//删除原先
$("#ul_"+obj).html("")
//判断循环新增
var text=""
if (obj=="other"){
for(var a =0a <imgSrc_examReportCard.lengtha++) {
text +='<li><input type="file" id="file_other" class="file_input" onchange="add_file_image('other')"></li>'
}
}else{
console.log('脏数据')
}
var oldBox ="<li><div class=\"filediv\"><span>+</span>\n" +
"<input type=\"file\" id=\"file_"+obj+"\" class=\"file_input\" onchange=\"add_file_image('"+obj+"')\">\n" +
"</div></li>"
$("#ul_"+obj).html( text+localText)
}
使用formData上传
var form =document.getElementById("form_addArchive")//表单id
var formData =new FormData(form)
$.each(imgFile_other,function(i, file){
formData.append('imgFileOther', file)
})
$.ajax({
url:url,
type:'POST',
async:true,
cache:false,
contentType:false,
processData:false,
dataType:'json',
data:formData,
xhrFields:{
withCredentials:true
},
success:function(data) {
}
},
error:function(XMLHttpRequest, textStatus, errorThrown) {
}
})
后台使用@RequestParam(value ="imgFileOther", required=false) List<MultipartFile>imgFileOther, 接受
//获取图片url以便显示
//文件格式验证
//图片压缩
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)