WebUploader上传图片(不压缩)

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (260)

Mysql (59)

DedeCms (33)

jQuery (74)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

图片上传 WebUploader 不压缩百度上传

打开边栏(ESC) 关闭边栏(ESC)

<!DOCTYPE html>
<html>
<head>
<title>webuploader图片上传</title>
<meta charset="utf-8"/>
<link href="lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />
</head>
<body>
<img id="face_image" style="width:50px;height:50px;border-radius: 25px;border: 1px solid #fff;"/>
<div id="uploader-demo">
	<div id="fileList" class="uploader-list"></div>
	<div id="filePicker">选择图片（webuploader）</div>
</div>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="lib/webuploader/0.1.5/webuploader.min.js"></script>
</body>
<script>
/**
* webuploader图片上传
*/
$(function() {
  console.log('webuploader图片上传。。。');
  var webuploaderutil = {};
  // Web Uploader实例
  var uploader;
  var $list = $('#fileList'),
  // 优化retina, 在retina下这个值是2
  ratio = window.devicePixelRatio || 1,
  thumbnailWidth = 100 * ratio, thumbnailHeight = 100 * ratio,
  // 初始化Web Uploader
  uploader = WebUploader.create({
    // 自动上传。
    auto : true,
    compress:false,   //是否压缩图片,默认true
      // 文件接收服务端。
    server : 'http://192.168.2.222:7070/file/upload',
    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
    pick : '#filePicker',
    chunked:true,
    chunkRetry: 10, // 如果某个分片由于网络问题出错，允许自动重传多少次？
    thread: 100,// 最大上传并发数
    // 只允许选择文件，可选。
    accept : {
      title : 'Images',
      extensions : 'gif,jpg,jpeg,bmp,png',
      mimeTypes : 'image/*'
    }
  });
  // 当有文件添加进来的时候
  uploader.on('fileQueued', function(file) {
    var $li = $('<div id="' + file.id + '" class="file-item thumbnail">'
      + '<img>' + '<div class="info">' + file.name + '</div>'
      + '</div>'), $img = $li.find('img');
    $list.append($li);
    // 创建缩略图
    uploader.makeThumb(file, function(error, src) {
      if (error) {
        $("#face_image").replaceWith('<span>不能预览</span>');
        $img.attr( 'src', src );
        return;
      }
      $img.attr( 'src', src );
      $("#face_image").attr('src', src);
    }, thumbnailWidth, thumbnailHeight);
  });
  // 文件上传过程中创建进度条实时显示。
  uploader.on('uploadProgress', function(file, percentage) {
    var $li = $( '#'+file.id ),
    $percent = $li.find('.progress span');
    // 避免重复创建
    if ( !$percent.length ) {
      $percent = $('<p class="progress"><span></span></p>')
      .appendTo( $li )
      .find('span');
    }
    $percent.css( 'width', percentage * 100 + '%' );
  });
  // 文件上传成功，给item添加成功class, 用样式标记上传成功。
  uploader.on('uploadSuccess', function(file, response) {
    $('#' + file.id).addClass('upload-state-done');
    //重新初始化
    //    webuploaderutil.uploadPicByResp(uploadDiv, imgEle, success, error);
    console.log('response:', response);
  });
  // 文件上传失败，现实上传出错。
  uploader.on('uploadError', function(file) {
    var $li = $('#' + file.id), $error = $li.find('div.error');
    // 避免重复创建
    if (!$error.length) {
      $error = $('<div class="error"></div>').appendTo($li);
    }
    $error.text('上传失败');
  });
  // 完成上传完了，成功或者失败，先删除进度条。
  uploader.on('uploadComplete', function(file) {
    $('#' + file.id).find('.progress').remove();
  });
});
</script>
</html>

重点是这个属性：compress:false, //是否压缩图片,默认true

赏