Ruby on Rails服務器文件上傳

最近看了下ruby on rails,試着把Dynamic Web TWAIN集成到ruby on rails中。這裏分享下如何在rails中用幾行代碼搞定文件上傳。
javascript

參考原文:How to Load, Scan and Upload Files with Ruby on Railshtml

做者:Desmond Shawjava

翻譯:yushulxpython

軟件安裝

在Windows上不要選擇Ruby 2.2,否則在運行rails server的時候會報錯:ruby

nokogiri不支持,詳情能夠閱讀https://github.com/sparklemotion/nokogiri/issues/1256session

Rails建立工程的基本步驟

  1. 安裝rails: app

    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

運行服務:

源碼

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

相關文章
相關標籤/搜索