2上传图片显示字节数为0的化解办法,2批量上传文件或图表

本文实例为大家分享了TP3.2批量上传文件或图片的具体代码,并解决了同名冲突问题,供大家参考,具体内容如下

很多朋友遇到这样一个问题,图片上传生成缩略图,很多人在本机(win)测试成功,上传到linux
服务器后错误。

 前端JS中使用XMLHttpRequest
2上传图片到服务器,PC端和大部分手机上都正常,但在少部分安卓手机上上传失败,服务器上查看图片,显示字节数为0。下面是上传图片的核心代码:

1、html

88bifa必发唯一官网,我也遇到同样的问题。网上一查,有无数的人说是服务器临时文件目录权限问题。

HTML

<form action="{:U('Upload/index')}" enctype="multipart/form-data" method="post" >
  <p><input type="file" id="file3" name="ID[]" /></p>
  <p><input type="file" id="file4" name="ID[]" /></p>
  <input type="submit" value="上传" />
  <p><img id="img1" alt="88bifa必发唯一官网 1" src="/Public/IMAGE/empty_thumb.gif" /></p>
 </form>

几经思考后,发现并非如此。

<input type="file" id="choose" capture="camera" accept="image/*"> 
JavaScript
var filechooser = document.getElementById("choose");
filechooser.onchange = function () {
var _this = $(this);
if (!this.files.length) return;
var files = Array.prototype.slice.call(this.files);
if (files.length > 1) {
alert("一次只能上传1张图片");
return;
}
files.forEach(function (file, i) {
if (!/\/(?:jpeg|png|gif)/i.test(file.type)) return;
var reader = new FileReader();
reader.onload = function () {
var result = this.result;
upload(result, file.type);
};
reader.readAsDataURL(file);
});
};
function upload(basestr, type){
var xhr = new XMLHttpRequest();
var text = window.atob(basestr.split(",")[1]);
var buffer = new Uint8Array(text.length);
var pecent = 0;
for (var i = 0; i < text.length; i++) {
buffer[i] = text.charCodeAt(i);
}
var blob = getBlob(buffer, type);
var formdata = new FormData();
formdata.append('imagefile', blob);
xhr.open('post', '/uploadtest');
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var jsonData = JSON.parse(xhr.responseText);
console.log(jsonData);
}
};
//利用progress事件显示数据发送进度
xhr.upload.addEventListener('progress', function (e) {
pecent = ~~(100 * e.loaded / e.total) / 2;
// 利用pecent来显示上传进度
}, false);
xhr.send(formdata);
}
function getBlob(buffer, format){
var Builder = window.WebKitBlobBuilder || window.MozBlobBuilder;
if(Builder){
var builder = new Builder();
builder.append(buffer);
return builder.getBlob(format);
} else {
return new window.Blob([ buffer ], {type: format});
}
} 

2、php

其根本的原因是,保存到变量的信息是之前的,之后又move移动到了自己指定的目录下,同时临时文件已经不存在。所以再生成缩略图的时候,需要open的,文件地址应该是自己定义的目录+文件名。然而很多实例文档中,还是使用的move
之前的信息。

  上述代码使用FormData来实现表单数据提交。FormData是一种针对XHR2设计的新型数据类型,使用它我们可以很方便地实时以JavaScript创建HTML
<Form>,然后通过AJAX提交该表单。在上述代码中,提交的表单中的字段名为imagefile,值是blob,这是一个通过getBlob函数构造并返回的文件Blob。通过该方法上传文件简单直观。

public function index(){
       if(!empty($_FILES)){
        $upload = new \Think\Upload();// 实例化上传类
        $upload->maxSize = 3145728;
        $upload->rootPath = './Uploads/';
        $upload->savePath = 'image/';
        //$upload->saveName = date('YmdHis').'-'.randomkeys(3);//msectime(),毫秒数13位
        $upload->saveName = 'msectime';   //自定义函数,采用13位毫秒和3位随机数
        $upload->exts   = array('jpg', 'gif', 'png', 'jpeg');
        $upload->autoSub = true;
        $upload->subName = array('date','Ymd');

        /* 判断$_FILES[$key]是否:一维数组,单张图片上传 -xzz0703 
         * 原理:html的input type = "file" name="IDcard"和name="IDcard[]"的区别:
         *    $_FILES前者到后台php是二维数组,后者是三维数组 
        */
        foreach($_FILES as $key=>$value){
          if(count($_FILES[$key]) == count($_FILES[$key],1)){
            $info = $upload->uploadOne($_FILES[$key]);
            if($info){
              echo json_encode(array('code'=>200,'id'=>$img_id,'name'=>$img_name));exit;
            }else{
              echo json_encode(array('code'=>0,'msg'=>$upload->getError()));exit;
            }
          }
        }
        if(count($_FILES)){
          $info = $upload->upload();//如果是二维数组,使用批量上传文件的方法
          if(!$info){
            $this->error($upload->getError());
            exit;
          }
          $img_url = '/Uploads/'.$info[0]['savepath'].$info[0]['savename'];
          $res = array('imgPath1'=>$img_url,code=>$img_url,'msg'=>$info);
          echo json_encode($res);
        }        
      }   
}

又加之在win服务器下,move后,指定目录已生成了文件,同时临时文件未被删除。所以能用move之前的信息生成缩略图。

  然后我们在服务端接收并保存图片,并返回已上传的图片的信息。

3、核心:很多朋友在使用TP3.2框架的时候,在saveName属性上面被卡住了,原因就是上传服务器处理级别的百万微秒,很快。

希望不多的言语能帮助遇到同样问题的你。

下面是Node.js代码的示例:

解决:saveName =
13位的毫秒+3位随机数,完美解决,具体代码:

下面在通过实例代码给大家介绍ThinkPHP5.0 图片上传生成缩略图的方法。

var Q = require('q');
var fs = require('fs');
var path = require('path');
var formidable = require('formidable');
var moment = require('moment');var imageUpload = function (){ };
imageUpload.prototype.useFormParseCallback = function(req){
var deferred = Q.defer();
var form = new formidable.IncomingForm();
form.parse(req, deferred.makeNodeResolver());
return deferred.promise;
};
imageUpload.prototype.uploadImageTest = function(req){
var pathName = 'uploadImgs/dealInfo/';
var uploadPath = path.join(__dirname, '../../public/', pathName);
return this.useFormParseCallback(req).then(function(files){
var file = files[1].imagefile;
var fileType = files[1].imagefile.type.split('/')[1];
var newFileName = 'upload_' + moment().format('x') + Math.random().toString().substr(2, 10) + '.' + fileType;
var readStream = fs.createReadStream(file.path);
var writeStream = fs.createWriteStream(uploadPath + newFileName);
var deferred = Q.defer();
readStream.pipe(writeStream);
readStream.on('end', deferred.makeNodeResolver());
return deferred.promise.then(function() {
fs.unlinkSync(file.path);
return {
fileName: newFileName,
filePath: '/' + pathName + newFileName,
fileSize: file.size/1024 > 1024 ? (~~(10*file.size/1024/1024))/10 + "MB" : ~~(file.size/1024) + "KB"
};
});
});
};
module.exports = imageUpload;
//返回当前的毫秒时间戳和随机数合并的字符串
function msectime() {
  list($msec, $sec) = explode(' ', microtime());
  $msectime = (float)sprintf('%.0f', (floatval($msec) + floatval($sec)) * 1000).randomkeys(3);
  return $msectime;
}

代码如下所示:

  我们使用formidable这个包来接收上传文件的数据,然后将文件保存到/public/uploadImgs/dealInfo目录下(假定已在express中将public设置为static的根目录),并将图片按照指定的规则重命名,以保证上传图片不会因为名称相同而被覆盖。另外,代码中使用Q来避免直接使用回调函数,以更好地对函数功能进行分离。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

<?php
namespace app\common\controller;
use app\common\model\Goods;
class Tools
{
 public static function upload_goods_img($whereName="", $width="", $height="")
 {
 // 打开图片的相对路径
 $imgpath = config('img_path');
 // 绝对路径
 $imgRootPath = config('imgRootPath');
 $storeId = '自定义';
 $merchantId = '自定义';
 $old_filename = $storeId . $merchantId . time();
 $filename = $storeId . $merchantId . time() . mt_rand(1000, 9999);
 $type = Goods::upload($whereName, $old_filename);
 if($type) 
 {
  $savepath = $imgRootPath . '/' . $whereName . '/' . $filename . '.' . $type;
  $thumbfile = $filename . '.' . $type;
  $thumbName = $imgpath . '/' . $whereName . '/' . $thumbfile;
  $image = \think\Image::open($imgpath . '/'. $whereName .'/' . $old_filename . '.' . $type);
  $image->thumb($width, $height, \think\Image::THUMB_FIXED)->save($thumbName);
  $data = [
  'access_url' => $imgRootPath . '/' . $whereName . '/' . $filename . '.' . $type,
  'filename' => $thumbfile,
  ];
  return $data;
 }
 } 
}

  上面的代码在PC端浏览器以及大部分主流移动设备上都能正常工作,但是少部分Android设备上却会出现上传的图片字节数为0的情况。具体的原因大家可以看下面几个网页中的描述:

您可能感兴趣的文章:

  • Android使用OkHttp上传图片的实例代码
  • C# 中实现ftp
    图片上传功能(多快好省)
  • Android中Okhttp3实现上传多张图片同时传递参数
  • 关于安卓手机微信浏览器中使用XMLHttpRequest
    2上传图片显示字节数为0的解决办法
  • iOS通过http post上传图片
  • http图片上传安全性问题 根据ContentType (MIME)
    判断其实不准确、不安全
  • ThinkPHP5.0
    图片上传生成缩略图实例代码说明

调用:

  就是说这个是Android的一个bug!

class Goods
{
 public function upload_sku()
 {
 $whereName = 'goods/sku';
 $width = 750;
 $height = 750;
 $data = Tools::upload_goods_img($whereName,$width, $height);
 return returnJson(1, '上传成功', $data);;
 }
}

  那如何解决呢?

PS:下面在看一段代码tp5中上传图片方法,并生成相应缩略图的方法

  其实从上面给出的页面中可以找到答案,就是我们得换一种文件上传方式。在XHR2中,除了以Blob的方式上传文件外,还可以ArrayBuffer的方式上传文件。

//接收上传文件的name
$file = $this->_req->file("upload_head_image");
//将上传的文件移动到public/uploads/user
$info = $file->validate(['size'=>5242880,'ext'=>'jpg,jpeg,png'])->move(ROOT_PATH . 'public' . DS . 'uploads' . DS . 'user');
if($info){
 $pic = new \app\home\model\User();
 $pic_url = $pic->thumbImage($file,$info);
 $user['portrait'] = 'uploads/user/'.$pic_url;
 //print_r($pic_url);exit();
 }

///model中代码如下
 /**
 * [生成用户头像缩略图,180、50]
 * @param [type] $file [获取上传文件$_FILE]
 * @param [type] $pic [上传文件的路径]
 * @return [type] [返回处理后的文件路径]
 */
 public function thumbImage($file,$pic){
 $image = \think\Image::open($file);
 $getSaveName = str_replace('\\','/',$pic->getSaveName());
$portrait_thumbnail_180= 'uploads/user/'.str_replace($pic->getFilename(),'180_'.$pic->getFilename(),$getSaveName);
$image->thumb(180,180,\think\Image::THUMB_CENTER)->save(ROOT_PATH . 'public' . DS . $portrait_thumbnail_180,null,100,true);
 $portrait_thumbnail_80 = 'uploads/user/'.str_replace($pic->getFilename(),'80_'.$pic->getFilename(),$getSaveName);
 $image->thumb(80,80,\think\Image::THUMB_CENTER)->save(ROOT_PATH . 'public' . DS . $portrait_thumbnail_80,null,100,true);
 $portrait_thumbnail_50 = 'uploads/user/'.str_replace($pic->getFilename(),'50_'.$pic->getFilename(),$getSaveName);
 $image->thumb(50,50,\think\Image::THUMB_CENTER)->save(ROOT_PATH . 'public' . DS . $portrait_thumbnail_50,null,100,true);
if ($image) {
  return $getSaveName;
 }
 }

下面是修改之后的前端JavaScript代码:

总结

var filechooser = document.getElementById("choose");
filechooser.onchange = function () {
var _this = $(this);
if (!this.files.length) return;
var files = Array.prototype.slice.call(this.files);
if (files.length > 1) {
alert("一次只能上传1张图片");
return;
}
files.forEach(function (file, i) {
if (!/\/(?:jpeg|png|gif)/i.test(file.type)) return;
var reader = new FileReader();
reader.onload = function () {
var result = this.result;
upload(result, file.type);
};
reader.readAsDataURL(file);
});
};
function upload(basestr, type){
var xhr = new XMLHttpRequest();
var text = window.atob(basestr.split(",")[1]);
var buffer = new Uint8Array(text.length);
var pecent = 0;
for (var i = 0; i < text.length; i++) {
buffer[i] = text.charCodeAt(i);
}
xhr.open('post', '/uploadtest?filetype=' + type.split('/')[1]);
xhr.setRequestHeader('Content-Type', 'application/octet-stream');
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var jsonData = JSON.parse(xhr.responseText);
console.log(jsonData);
}
};
//利用progress事件显示数据发送进度
xhr.upload.addEventListener('progress', function (e) {
pecent = ~~(100 * e.loaded / e.total) / 2;
// 利用pecent来显示上传进度
}, false);
xhr.send(buffer.buffer); // 以ArrayBuffer的方式上传图片
}

以上所述是小编给大家介绍的ThinkPHP5.0
图片上传生成缩略图实例代码说明,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

  我将有变化的地方加了高亮显示。以ArrayBuffer方式上传图片必须添加’application/octet-stream’的RequestHeader,否则服务器无法响应请求。另外,通过这种方式上传图片我们也无法从表单数据中获取到文件类型,可以将文件类型以query的方式传到服务器,然后服务器根据文件类型来生成对应的文件,以下是经过少量修改之后的服务器代码:

您可能感兴趣的文章:

  • TP3.2批量上传文件或图片
    同名冲突问题的解决方法
  • Android使用OkHttp上传图片的实例代码
  • C# 中实现ftp
    图片上传功能(多快好省)
  • Android中Okhttp3实现上传多张图片同时传递参数
  • 关于安卓手机微信浏览器中使用XMLHttpRequest
    2上传图片显示字节数为0的解决办法
  • iOS通过http post上传图片
  • http图片上传安全性问题 根据ContentType (MIME)
    判断其实不准确、不安全
imageUpload.prototype.uploadImageTest = function(req){
var pathName = 'uploadImgs/dealInfo/';
var uploadPath = path.join(__dirname, '../../public/', pathName);
return this.useFormParseCallback(req).then(function(files){
var file = files[1].file;
var fileType = req.query.filetype ? ('.' + req.query.filetype) : '.png';
var newFileName = 'upload_' + moment().format('x') + Math.random().toString().substr(2, 10) + '.' + fileType;
var readStream = fs.createReadStream(file.path);
var writeStream = fs.createWriteStream(uploadPath + newFileName);
var deferred = Q.defer();
readStream.pipe(writeStream);
readStream.on('end', deferred.makeNodeResolver());
return deferred.promise.then(function() {
fs.unlinkSync(file.path);
return {
fileName: newFileName,
filePath: '/' + pathName + newFileName,
fileSize: file.size/1024 > 1024 ? (~~(10*file.size/1024/1024))/10 + "MB" : ~~(file.size/1024) + "KB"
};
});
});
};

  修改之后的代码可以支持Android手机,包括微信浏览器。注意不是所有的Android手机都会存在该问题,如果你发现在Andriod手机上无法上传图片,尤其是在微信浏览器中,则可以尝试下上面的方法。

以上所述是小编给大家介绍的关于安卓手机微信浏览器中使用XMLHttpRequest
2上传图片显示字节数为0的解决办法,希望对大家有所帮助!

您可能感兴趣的文章:

  • TP3.2批量上传文件或图片
    同名冲突问题的解决方法
  • Android使用OkHttp上传图片的实例代码
  • C# 中实现ftp
    图片上传功能(多快好省)
  • Android中Okhttp3实现上传多张图片同时传递参数
  • iOS通过http post上传图片
  • http图片上传安全性问题 根据ContentType (MIME)
    判断其实不准确、不安全
  • ThinkPHP5.0
    图片上传生成缩略图实例代码说明