选择图片上传时,JS怎么获取图片的tmp_name

fkueyga6 2018-01-06 09:04:48
var fileName = this.files[i].name;//这个可以获取到
var filesize = this.files[i].size;//这个可以获取到
var filetype = this.files[i].type;//这个可以获取到
var filetmpname = this.files[i].tmp_name;//就是这个不可以获取到,要怎么样才能获取到?值相当于$_FILES['file']['tmp_name']这个
...全文
572 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
fkueyga6 2018-01-08
  • 打赏
  • 举报
回复
如果一张一张选择,前端可以显示所有选择的图片,但是后台只能获取到最后选择的一张图片的信息,怎么弄呢?
fkueyga6 2018-01-08
  • 打赏
  • 举报
回复
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>showImages</title> <style type="text/css"> .float{ float:left; width : 200; height: 200; overflow: hidden; border: 1px solid #CCCCCC; border-radius: 10px; padding: 5px; margin: 5px; } img{ position: relative; } .result{ width: 200px; height: 200px; text-align: center; box-sizing: border-box; } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> window.onload = function() { var input = document.getElementById("file_input"); var result,div,fileName_all; if(typeof FileReader==='undefined') { result.innerHTML = "抱歉,你的浏览器不支持 FileReader"; input.setAttribute('disabled','disabled'); } else { input.addEventListener('change',readFile,false); }     //handler var dataArr = null; //直接传base64数据 var fd = null; //FormData方式发送请求 function readFile() { dataArr = { data : [] }; fd = new FormData(); var iLen = this.files.length; for(var i=0;i<iLen;i++) { if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)) {  //判断上传文件格式 return alert("上传的图片格式不正确,请重新选择"); } var reader = new FileReader(); fd.append(i,this.files[i]); reader.readAsDataURL(this.files[i]); //转成base64 var fileName = this.files[i].name; reader.onload = function(e) { var imgMsg = { name : fileName,//获取文件名 base64 : this.result //reader.readAsDataURL方法执行完后,base64数据储存在reader.result里 } dataArr.data.push(imgMsg); result = '<div style="display:none" class="result" ><img src="'+this.result+'" alt=""/></div>'; div = document.createElement('div'); div.innerHTML = result; div['className'] = 'float'; document.getElementsByTagName('body')[0].appendChild(div);   //插入dom树 var img = div.getElementsByTagName('img')[0]; img.onload = function() { var nowHeight = ReSizePic(this); //设置图片大小 this.parentNode.style.display = 'block'; var oParent = this.parentNode; if(nowHeight) { oParent.style.paddingTop = (oParent.offsetHeight - nowHeight)/2 + 'px'; } } } } } function send(){ $.ajax({ url : '', type : 'post', data : dataArr, dataType: 'json', //processData: false, 用FormData传fd时需有这两项 //contentType: false, success : function(data){ console.log('返回的数据:'+JSON.stringify(data))  } }) } var oBtn = document.getElementsByTagName('button')[0]; oBtn.onclick=function(){ if(!input.files.length){ return alert('请先选择文件'); } send(); } } /* 用ajax发送fd参数时要告诉jQuery不要去处理发送的数据, 不要去设置Content-Type请求头才可以发送成功,否则会报“Illegal invocation”的错误, 也就是非法调用,所以要加上“processData: false,contentType: false,” * */ function ReSizePic(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; } } </script> </head> <body ng-controller="Aaa" > <div class="container"> <label>请选择一个图像文件:</label> <input type="file" id="file_input" multiple/> <!--用input标签并选择type=file,记得带上multiple,不然就只能单选图片了--> <button>提交</button> </div> </body> </html> 上面的代码是前端的,请问后台上传服务端到数据库应该怎么写呢?
fkueyga6 2018-01-06
  • 打赏
  • 举报
回复
请问后台服务端的应该怎么写呢?
天际的海浪 2018-01-06
  • 打赏
  • 举报
回复
src里的是图片的base64数据, 浏览器不允许获取用户本地文件的路径
fkueyga6 2018-01-06
  • 打赏
  • 举报
回复
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>showImages</title> <style type="text/css"> .float{ float:left; width : 200; height: 200; overflow: hidden; border: 1px solid #CCCCCC; border-radius: 10px; padding: 5px; margin: 5px; } img{ position: relative; } .result{ width: 200px; height: 200px; text-align: center; box-sizing: border-box; } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> window.onload = function() { var input = document.getElementById("file_input"); var result,div,fileName_all; if(typeof FileReader==='undefined') { result.innerHTML = "抱歉,你的浏览器不支持 FileReader"; input.setAttribute('disabled','disabled'); } else { input.addEventListener('change',readFile,false); }     //handler var dataArr = null; //直接传base64数据 var fd = null; //FormData方式发送请求 function readFile() { dataArr = { data : [] }; fd = new FormData(); var iLen = this.files.length; for(var i=0;i<iLen;i++) { if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)) {  //判断上传文件格式 return alert("上传的图片格式不正确,请重新选择"); } var reader = new FileReader(); fd.append(i,this.files[i]); reader.readAsDataURL(this.files[i]); //转成base64 var fileName = this.files[i].name; reader.onload = function(e) { var imgMsg = { name : fileName,//获取文件名 base64 : this.result //reader.readAsDataURL方法执行完后,base64数据储存在reader.result里 } dataArr.data.push(imgMsg); result = '<div style="display:none" class="result" ><img src="'+this.result+'" alt=""/></div>'; div = document.createElement('div'); div.innerHTML = result; div['className'] = 'float'; document.getElementsByTagName('body')[0].appendChild(div);   //插入dom树 var img = div.getElementsByTagName('img')[0]; img.onload = function() { var nowHeight = ReSizePic(this); //设置图片大小 this.parentNode.style.display = 'block'; var oParent = this.parentNode; if(nowHeight) { oParent.style.paddingTop = (oParent.offsetHeight - nowHeight)/2 + 'px'; } } } } } function send(){ $.ajax({ url : '', type : 'post', data : dataArr, dataType: 'json', //processData: false, 用FormData传fd时需有这两项 //contentType: false, success : function(data){ console.log('返回的数据:'+JSON.stringify(data))  } }) } var oBtn = document.getElementsByTagName('button')[0]; oBtn.onclick=function(){ if(!input.files.length){ return alert('请先选择文件'); } send(); } } /* 用ajax发送fd参数时要告诉jQuery不要去处理发送的数据, 不要去设置Content-Type请求头才可以发送成功,否则会报“Illegal invocation”的错误, 也就是非法调用,所以要加上“processData: false,contentType: false,” * */ function ReSizePic(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; } } </script> </head> <body ng-controller="Aaa" > <div class="container"> <label>请选择一个图像文件:</label> <input type="file" id="file_input" multiple/> <!--用input标签并选择type=file,记得带上multiple,不然就只能单选图片了--> <button>提交</button> </div> </body> </html> 上面的代码是前端的,请问后台服务端的应该怎么写呢?
fkueyga6 2018-01-06
  • 打赏
  • 举报
回复
for(var i=0;i<iLen;i++) { if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)) {  //判断上传文件格式 return alert("上传的图片格式不正确,请重新选择"); } var reader = new FileReader(); fd.append(i,this.files[i]); reader.readAsDataURL(this.files[i]); //转成base64 var fileName = this.files[i].name; var filesize = this.files[i].size; var filetype = this.files[i].type; reader.onload = function(e) { var imgMsg = { name : fileName,//获取文件名 base64 : this.result //reader.readAsDataURL方法执行完后,base64数据储存在reader.result里 } dataArr.data.push(imgMsg); var filetmpname = this.result; result = '<div style="display:none" class="result" ><img src="'+this.result+'" alt=""/></div>';这里src里的打印出来为什么不是路径,而是一些什么乱七八糟的?怎么才能获取到路径? ......略
天际的海浪 2018-01-06
  • 打赏
  • 举报
回复
而且tmp_name是文件上传到服务器临时文件夹之后的文件名,是文件上传到服务器有才有的,在前端对象中当然没有了
fkueyga6 2018-01-06
  • 打赏
  • 举报
回复
那我怎么在后台用move_uploaded_file这个函数上传呢?
天际的海浪 2018-01-06
  • 打赏
  • 举报
回复
人家对象不提供这个属性,当然获取不到。

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧