简体   繁体   English

JQuery-File-Upload客户端使用coffeescript调整图像大小

[英]JQuery-File-Upload Client side Image resizing with coffeescript

I'd like to implement client side image resizing using Jquery-File-Upload : 我想使用Jquery-File-Upload实现客户端图像大小调整:

https://github.com/blueimp/jQuery-File-Upload/wiki/Client-side-Image-Resizing https://github.com/blueimp/jQuery-File-Upload/wiki/Client-side-Image-Resizing

I'd like to implement it in coffeescript, though, to use with some file uploading code I found from this railscast: 不过,我想在coffeescript中实现它,以便与从该railscast中找到的一些文件上传代码一起使用:

http://railscasts.com/episodes/383-uploading-to-amazon-s3 http://railscasts.com/episodes/383-uploading-to-amazon-s3

I'm not sure how to incorporate the disableImageResize example with coffeescript. 我不确定如何将disableImageResize示例与coffeescript合并。 This is what I have, which doesn't work (I can run the app, but it doesn't seem to do any resizing): 这是我所拥有的,它不起作用(我可以运行该应用程序,但似乎没有进行任何调整大小):

jQuery ->
  $('#new_image').fileupload
    dataType: "script"     
    disableImageResize: /Android(?!.*Chrome)|Opera/
                .test(window.navigator && navigator.userAgent),
            imageMaxWidth: 667,
            imageMaxHeight: 667
    add: (e, data) ->
      types = /(\.|\/)(gif|jpe?g|png)$/i
      file = data.files[0]
      if types.test(file.type) || types.test(file.name)
        $('#images').append('<div class="placeholder"></div>');
        $('.placeholder').hide();
        data.context = $(tmpl("template-upload", file))
        $('#imageUploadProgress').append(data.context)
        data.submit()       
      else
        alert("#{file.name} is not a gif, jpeg, or png image file")
    progress: (e, data) ->
      if data.context
        progress = parseInt(data.loaded / data.total * 100, 10)
        data.context.find('.bar').css('width', progress + '%')
        if progress == 100
           $('.placeholder').show();
           # scroll to the bottom of the thumbGallery to show recently uploaded image
           document.getElementById("images").scrollTop = document.getElementById("images").scrollHeight

Can someone tell me what I'm doing incorrectly? 有人可以告诉我我做错了什么吗? I found other StackOverflow questions about the same topic, but both are unanswered: 我发现了关于同一主题的其他StackOverflow问题,但均未得到解答:

How to resize images client side using jquery file upload 如何使用jQuery文件上传来调整图像客户端的大小

Resizing image at client-side using JQuery file upload to amazon S3 使用上传到Amazon S3的JQuery文件在客户端调整图像大小

The simple way is to remove the add callback. 简单的方法是删除add回调。 Otherwise, you're responsible for triggering the resize manually, which I have yet to find out how to do! 否则,您有责任手动触发调整大小,我还没有找出如何做!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM