如何使用ng-flow保存上傳的圖像VB.NET

嗨，我在使用angularjs和flowjs上傳和保存圖像方面遇到了一些問題。如何使用ng-flow保存上傳的圖像VB.NET

我是新來的angularjs，有我的問題試圖做一個圖像上傳，但我得到它與ng-flow一起工作，仍然有一些問題試圖將圖像保存到一些設計路徑。

一個例子和類似的問題是這個How and where save uploaded files with ng-flow?，但我仍然無法使它的工作。

下面是上傳和預覽代碼，做工精細到目前爲止好：

<div class="ng-scope add-file" flow-init="{target:'../WebService/WebService.asmx/setImage'}" 
flow-name="image.flow" flow-files-submitted="$flow.upload()" 
flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]"> 
<div class="row" style="margin-top: 0px!important;"> 
    <div class="col-sm-10"> 
     <p><label for="image">ADD PHOTO</label></p> 
     <table style="border: 0px;"> 
      <tr> 
       <td ng-repeat="file in $flow.files" class="ng-scope thumbnail" style="margin: 3px 3px 3px 3px;"> 
        <div class="text-right"> 
         <a class="glyphicon glyphicon-remove" ng-click="file.cancel()" 
          style="color:#ff4b4b; text-decoration: none!important;"></a> 
        </div> 
        <div class="frame" ng-show="$flow.files.length" style="min-width: 210px!important;"> 
         <span class="helper"></span> 
         <img flow-img="file" src="" class="image-thumbnail"> 
        </div> 
        <div class="progress progress-striped" ng-class="{active: file.isUploading()}"> 
         <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" 
          aria-valuemax="100" ng-style="{width: (file.progress() * 100) + '%'}"> 
         </div> 
         <span class="sr-only ng-binding">1% Complete</span> 
        </div> 
       </td> 
      </tr> 
     </table> 
    </div> 
    <div class="col-sm-2 text-right drop" flow-drop="" ng-class="dropClass"> 
     <span class="file-upload btn btn-primary" flow-btn=""> 
      Choose file 
      <input type="file" multiple="multiple" style="visibility: hidden; position: absolute;"> 
     </span> 
    </div> 
</div>

但這裏的問題，我不知道如何或怎樣做才能創造這個形象在一些路徑...

我傳遞給NG-流初始化我的web服務方法，因爲它會通過URL參數發送這樣的：

flow-init="{target:'../WebService/WebService.asmx/setImage'}"

和WS收到類似於下面的示例：

../setImage?flowChunkNumber=1&flowChunkSize=1048576&flowCurrentChunkSize=198637&flowTotalSize=198637&flowIdentifier=198637-1jpg&flowFilename=1.jpg&flowRelativePath=1.jpg&flowTotalChunks=1 

    'flowChunkNumber=1 
    'flowChunkSize=1048576 
    'flowCurrentChunkSize=111168 
    'flowTotalSize = 111168 
    'flowIdentifier=111168-Figura1png 
    'flowFilename=Figura1.png 
    'flowRelativePath=Figura1.png 
    'flowTotalChunks = 1

我應該做的這些信息或者我需要什麼來發送數據（二進制，基數64等），保存/上創造的形象是什麼我服務器？

編輯1：我已經知道我需要的文件數據，並計算過，我確實需要一個upload.php的改造和發送文件。還想不到如何爲vb.net創建upload.php

來源

2014-09-29 Daniel Hideki Yanishi

經過很長時間的搜索，我決定向前邁進，並採用完全不同的方式，我幾乎刪除了所有我自定義的CSS，風格，使其更加乾淨的閱讀。

任何東西之前，我改變出頭就像我不使用NG流了，這純粹是angularjs和javascript，我編碼文件的Base64和我的服務器端進行解碼它。

HTML：

<div class="row"> 
<div class="col-sm-10"> 
    <table> 
     <tr> 
      <td ng-repeat="image in images"> 
       <div> 
        <img id="imagePreview{{$index}}" src="#" alt="" /> 
       </div> 
      </td> 
     </tr> 
    </table> 
</div> 
<div class="col-sm-2 text-right"> 
    <input type="file" id="img" /> 

    <button ng-click="addImage()" type="button">ADD</button> 
</div> 
</div>

AngularJS控制器：

$scope.images = []; 

//Don't let the same file to be added again 
$scope.removeImage = function (index) { 
    $scope.images.splice(index, 1); 
} 

//Add new file to $scope.images 
$scope.addImage = function() { 

    var 
     reader = new FileReader(), 
     $img = $("#img")[0], 
     index = $scope.images.length; 

    reader.onload = function (e) { 

     if ($scope.images.indexOf(e.target.result) > -1) return; 

     $scope.images.push(e.target.result); 
     if (!$scope.$$phase) $scope.$apply(); 

     $("#imagePreview" + index).attr('src', e.target.result); 

     $scope.uploadImage(index); 
    } 

    reader.readAsDataURL($img.files[0]); 
};

這裏，它是如何獲得這些文件轉換爲Base64的：

$scope.uploadImage = function (index) { 
    var res = $scope.images[index]; 
    //{...} Your code here, method call etc. 
}

來源

2014-10-01 18:28:33

如何使用ng-flow保存上傳的圖像VB.NET

回答

相關問題