WebUploader上传图片(不压缩)
web 其他 2018-04-25 2988 0
关于本站

“最难不过坚持”

本人承接扒站仿站,php网站维护,病毒查杀,网站编辑,网站改版,html制作

有需要网站维护,改版,病毒查杀,网站编辑,网站备案,html制作等相关的工作可以联系我。
本人有多年相关工作经验,也可提供免费咨询,交个朋友。
有需要探讨问题的朋友,也可以加我微信,共同探讨!
微信:15011482830 QQ:408917339

6283734 2594 39
最新评论
https://jueru.net/
评 留言
:weixiao:
评 留言
:shuijiao: :weiqu: :zhenbang: :leng:
评 留言
:yiwen: :yiwen: :yiwen: :yiwen:
评 EasySass: could not generate CSS file. See Output panel for details.
这个业务逻辑多少都有点奇怪了,阅读浏览次数增值在新闻详情页的控制器方法里setInc,这怎么还写进模型事件里了。如果非要用onAfterRead也可以,把新闻文章的内容单独分出来一个news_content表,然后把它和news做关联,然后给news_content表的onAfterRead事件做增值处理,这样点进新闻页内查询到文章内容时才会触发它。
评 TP6模型事件-查询后onAfterRead不好用
文章标签更多
ThinkPHP (254)
Mysql (58)
DedeCms (33)
jQuery (67)
证件照 (1)
setInc (4)
setDec (4)
onclick (5)
打开边栏(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


版权声明:本篇文章来源于网络。 来源链接

相关推荐
Uncaught (in promise) 的解决方法,可能原因
其他 | 2022-06-25 1076989
Uncaught (in promise) 的解决方法,可能原因;仅仅只是一种参考原因 我是因为copy的项目直接修改的,结果一直报错 Uncaught (in promise),检查发现接口请求数据已经正常返回,后来经过排查发现是在拦截器里面别人的判断是response.data.status !== 1 就算请求失败,从而Promi...
钉钉怎样设置快捷键?钉钉系统设置在哪
其他 | 2019-03-20 20940
钉钉怎样设置快捷键? 1,打开电脑端钉钉面板,点击右上角自己的头像,下拉菜单中点击系统设置 2,进入系统设置面板,下拉滚动条,找到快捷键设置
评论:0条
评论加载中...
发表评论