Ruby on Rails服务器文件上传

最近看了下ruby on rails,试着把Dynamic Web TWAIN集成到ruby on rails中。这里分享下如何在rails中用几行代码搞定文件上传。

参考原文:How to Load, Scan and Upload Files with Ruby on Rails

作者:Desmond Shaw

翻译:yushulx

软件安装

  • Dynamic Web TWAIN 11.1

  • Ruby 2.1.7

  • Ruby Development Kit

在Windows上不要选择Ruby 2.2,不然在运行rails server的时候会报错:

Ruby on Rails服务器文件上传_第1张图片

nokogiri不支持,详情可以阅读https://github.com/sparklemotion/nokogiri/issues/1256。

Rails创建工程的基本步骤

  1. 安装rails: 

    gem install rails
  2. 创建应用: 

    rails new dwt
  3. cd到dwt

  4. 启动服务

    rails server
  5. 访问http://localhost:3000

Rails集成Dynamic Web TWAIN上传文件

创建controller

rails generate controller twainscanning home

< Dynamic Web TWAIN directory >\Resources拷贝到< Rails Project >\public\Resources

打开< Rails Project >\app\views\twainscanning\home.html.erb添加下面的代码:

<html>
 
<head>
  <title>DWT with Ruby</title>
  <script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"></script>
  <script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"></script>
  <style>
    h1 {
      font-size: 2em;
      font-weight: bold;
      color: #777777;
      text-align: center
    }
    table {
      margin: auto;
    }
  </style>
</head>
 
<body>
  <h1>
            DWT with Ruby
  </h1>
  <table>
    <tr>
      <td>
        <!-- dwtcontrolContainer is the default div id for Dynamic Web TWAIN control.
                   If you need to rename the id, you should also change the id in dynamsoft.webtwain.config.js accordingly. -->
        <div id="dwtcontrolContainer"></div>
      </td>
    </tr>
 
    <tr>
      <td>
        <input type="button" value="Load Image" onclick="btnLoad_onclick();" />
        <input type="button" value="Scan Image" onclick="AcquireImage();" />
        <input id="btnUpload" type="button" value="Upload Image" onclick="btnUpload_onclick()">
      </td>
    </tr>
  </table>
 
  <!--Custom script goes here-->
  <script type="text/javascript">
    Dynamsoft.WebTwainEnv.RegisterEvent('OnWebTwainReady', Dynamsoft_OnReady);
    var DWObject;
 
    function Dynamsoft_OnReady() {
      DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer'); // Get the Dynamic Web TWAIN object that is embeded in the div with id 'dwtcontrolContainer'
      DWObject.Width = 480; // Set the width of the Dynamic Web TWAIN Object
      DWObject.Height = 640; // Set the height of the Dynamic Web TWAIN Object
    }
 
    function btnLoad_onclick() {
      var OnSuccess = function() {};
 
      var OnFailure = function(errorCode, errorString) {};
 
      DWObject.IfShowFileDialog = true;
      DWObject.LoadImageEx("", EnumDWT_ImageType.IT_ALL, OnSuccess, OnFailure);
    }
 
    function AcquireImage() {
      if (DWObject) {
        DWObject.IfShowUI = false;
        DWObject.IfDisableSourceAfterAcquire = true; // Scanner source will be disabled/closed automatically after the scan.
        DWObject.SelectSource(); // Select a Data Source (a device like scanner) from the Data Source Manager.
        DWObject.OpenSource(); // Open the source. You can set resolution, pixel type, etc. after this method. Please refer to the sample 'Scan' -> 'Custom Scan' for more info.
        DWObject.AcquireImage(); // Acquire image(s) from the Data Source. Please NOTE this is a asynchronous method. In other words, it doesn't wait for the Data Source to come back.
      }
    }
 
    function btnUpload_onclick() {
      DWObject.HTTPPort = 3000;
      var CurrentPathName = unescape(location.pathname); // get current PathName in plain ASCII
      var CurrentPath = CurrentPathName.substring(0, CurrentPathName.lastIndexOf("/") + 1);
      var strActionPage = CurrentPath + "upload/";
      var strHostIP = "localhost"; // server IP e.g. 192.168.8.84
 
      var OnSuccess = function(httpResponse) {
        alert("Succesfully uploaded");
      };
 
      var OnFailure = function(errorCode, errorString, httpResponse) {
        alert(httpResponse);
      };
 
      var date = new Date();
      DWObject.HTTPUploadThroughPostEx(
        strHostIP,
        DWObject.CurrentImageIndexInBuffer,
        strActionPage,
        date.getTime() + ".jpg",
        1, // JPEG
        OnSuccess, OnFailure
      );
    }
 
  </script>
 
</body>
 
</html>

打开< Rails Project >\app\controller\application_controler.rb注释掉:

class ApplicationController < ActionController::Base
  # Prevent CSRF attacks by raising an exception.
  # For APIs, you may want to use :null_session instead.
  #protect_from_forgery with: :exception
end

打开< Rails Project >\config\routes.rb 添加映射:

Rails.application.routes.draw do
  get 'twainscanning/home'
  root 'twainscanning#home'
  post 'upload/' => 'twainscanning#upload'
end

打开< Rails Project >\app\controller\twainscanning_controller.rb添加文件上传代码:

class TwainscanningController < ApplicationController
  def home
  end
 
  def upload
    uploaded_io = params[:RemoteFile]
 
    upload_dir = Rails.root.join('public', 'upload')
    unless Dir.exist?(upload_dir)
      Dir.mkdir(upload_dir)
    end
 
    File.open(Rails.root.join('public', 'upload', uploaded_io.original_filename), 'wb') do |file|
      file.write(uploaded_io.read)
    end
 
    respond_to do |format|
      format.html.any { render text: "Successfully uploaded!"}
    end
 
  end
end

运行服务:

Ruby on Rails服务器文件上传_第2张图片

源码

https://github.com/dynamsoftsamples/dwt-ruby-on-rails


你可能感兴趣的:(Web,dynamic,Ruby,Rails,TWAIN)