将字符串插入<input />标记

时间:2015-03-15 12:20:26

标签: vb.net html5 input

我正在开发一个连接到我的服务器的客户端,并且可以访问下载和上传文件,而且我似乎无法上传文件。这是我的VB.NET客户端上的代码:

    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click 'Upload button
    WebBrowser1.Visible = True


    'Style OpenFileDialog1
    OpenFileDialog1.Title = "Select file to upload"
    OpenFileDialog1.InitialDirectory = System.Environment.SpecialFolder.Desktop

    OpenFileDialog1.ShowDialog()

End Sub

Private Sub OpenFileDialog1_FileOk(sender As Object, e As System.ComponentModel.CancelEventArgs) Handles OpenFileDialog1.FileOk

    uploadFile = OpenFileDialog1.FileName.ToString()

    If uploadFile = Nothing Then
        MessageBox.Show("You just selected nothing.", "Information")
    Else
        WebBrowser1.Document.GetElementById("fileselect").SetAttribute("value", uploadFile)
        WebBrowser1.Document.GetElementById("submit").InvokeMember("click")
    End If

End Sub

这是HTML代码:

<input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />

<button type="submit" id="submit" class="uploadButton">Upload Files</button>

另外我如何制作以便我可以选择多个文件?通过网络版,你可以选择多个文件,它不工作吗?

1 个答案:

答案 0 :(得分:0)

因此,正如评论中所提到的,类型文件的输入元素不允许进行外部修改,所有与它们的交互都是通过浏览器完成的,并且基于直接的用户交互。

但是,您可以创建一个上传类,通过创建HttpWebRequest将多个文件上传到您的服务器,HttpWebRequest将数据发送到表单。如果没有认证,可以通过以下方式完成。

允许对帖子数据项进行一些基本操作的界面

Public Interface IPostItem
    ReadOnly Property Title As String
    Property ElementName As String
    Function GetPostData(inputNameElement As String) As String
End Interface

定义正在发送的文件的mime类型的某种方式

Public NotInheritable Class MimeTypeHandler
    Private Shared ReadOnly images As String() = {"jpg", "gif", "bmp", "png", "jpeg"}

    Public Shared Function GetMimeType(filename As String) As String
        Dim extension As String = Path.GetExtension(filename).Replace(".", "")
        If (images.Contains(extension)) Then
            Return "image/" + extension
        End If
        Return "application/" + extension
    End Function
End Class

使用可以发布文件的实现

实现IPostItem
Public Class FileQueueItem
    Implements IPostItem

    Public Property FileName As String

    Public Property ElementName As String Implements IPostItem.ElementName

    Public Function GetData() As Byte()
        Dim result As Byte() = Nothing
        Dim lengthRead As Integer = 0
        Using stream As New FileStream(FileName, FileMode.Open, FileAccess.Read)
            ReDim result(stream.Length)
            lengthRead = stream.Read(result, 0, stream.Length)
        End Using
        Return result
    End Function

    Public ReadOnly Property ShortName As String Implements IPostItem.Title
        Get
            Return FileName.Substring(FileName.LastIndexOf("\") + 1)
        End Get
    End Property

    Public ReadOnly Property MimeType As String
        Get
            Return MimeTypeHandler.GetMimeType(FileName)
        End Get
    End Property

    Public Function GetPostData(inputNameElement As String) As String Implements IPostItem.GetPostData
        Dim message As String = String.Empty
        message += String.Format("Content-Disposition: form-data; name=""{0}""; filename=""{1}""{3}Content-Type: {2}{3}Content-Transfer-Encoding: base64{3}{3}", inputNameElement, ShortName, MimeType, Environment.NewLine)
        message += Convert.ToBase64String(GetData())
        Return message
    End Function

    Public Sub New(filename As String, elementName As String)
        Me.FileName = filename
        Me.ElementName = elementName
    End Sub
End Class

有一个使用BackgroundWorker类运行上传序列的小型控制器类,它每5个发送一次文件(可以设置,是默认值)。

它需要一个FormUrl,说明要将表单发布到哪里,在我的情况下,我在我的localhost上运行它,以便您在表单代码中看到

Public Class FileUploader
    Inherits BackgroundWorker
    Private ReadOnly _listQueue As IList(Of IPostItem) = New List(Of IPostItem)

    Public Property FormUrl As String

    Public ReadOnly Property ListQueue As IList(Of IPostItem)
        Get
            Return _listQueue
        End Get
    End Property

    Public Property MaxPerQueue As Integer

    Protected Function HandleResponse(request As HttpWebRequest) As Boolean
        Dim success As Boolean = False
        Try
            Using response As HttpWebResponse = CType(request.GetResponse(), HttpWebResponse)
                success = response.StatusCode <> HttpStatusCode.OK
            End Using
        Catch ex As WebException
            If ex.Response IsNot Nothing Then
                ex.Response.Close()
            End If
        End Try
        Return success
    End Function

    Protected Sub Run(sender As Object, e As DoWorkEventArgs)
        If ListQueue.Count = 0 Then
            ' nothing to upload
            Return
        End If
        ' create the boundary string, used to split between the separate attachments
        Dim boundary As String = String.Format("--------------------------{0}", DateTime.Now.Ticks)
        Dim count As Integer = 0
        Dim totalFiles As Integer = ListQueue.Count

        Do
            ' create the request
            Dim request As HttpWebRequest = CType(WebRequest.Create(Me.FormUrl), HttpWebRequest)
            Dim fullPostMessage As String = String.Empty
            request.AllowAutoRedirect = True
            request.KeepAlive = True
            request.Referer = Me.FormUrl
            ''// say that it has to post data
            request.Method = WebRequestMethods.Http.Post
            ''// same style like a form
            request.ContentType = "multipart/form-data;boundary=" + boundary
            count = 0
            Dim queueItem As IPostItem
            While count < MaxPerQueue AndAlso ListQueue.Count > 0
                ''// get the item in the queue
                queueItem = ListQueue(0)
                ''// report potential changes to gui
                Report(queueItem.Title, count, totalFiles)
                Dim postAsString As String = queueItem.GetPostData(queueItem.ElementName)
                fullPostMessage &= String.Format("--{0}{1}{2}{1}", boundary, Environment.NewLine, postAsString)
                ''// remove the item from the queue
                ListQueue.RemoveAt(0)
                count += 1
            End While
            fullPostMessage &= "--" & boundary & "--"
            Dim postData As Byte() = System.Text.Encoding.ASCII.GetBytes(fullPostMessage)
            ''// write data to the requestStream (post data)
            request.ContentLength = postData.Length
            Dim requestStream As Stream = request.GetRequestStream()
            requestStream.Write(postData, 0, postData.Length)
            requestStream.Close()
            ''// handle the response
            HandleResponse(request)
            requestStream.Dispose()
        Loop While ListQueue.Count > 0
        ListQueue.Clear()
        Report("(Idle)", 0, 100)
    End Sub

    Protected Sub Report(filename As String, fileIndex As Integer, maxFiles As Integer)
        Dim percentage As Integer = (fileIndex * 100) / maxFiles
        ReportProgress(percentage, filename)
    End Sub

    Public Sub New()
        Me.WorkerReportsProgress = True
        AddHandler Me.DoWork, AddressOf Run
        MaxPerQueue = 5
    End Sub
End Class

然后你可以像这样创建你的表单:

Default Upload Form with Button, label and progressbar

然后将FileUploader类添加为私有成员,这样您就可以在完成上传流时收到通知,添加eventhandler以获得有关更改的通知

Imports System.ComponentModel
Imports System.Net
Imports System.IO

Public Class Form1
    Private fileUploadHandler As New FileUploader()

    Private Sub btnUploadFiles_Click(sender As Object, e As EventArgs) Handles btnUploadFiles.Click

        fileUploadHandler.FormUrl = "http://localhost:5555/Default.aspx"
        Using openDialog As New OpenFileDialog
            openDialog.Multiselect = True
            openDialog.Title = "Select files to upload to the server"
            If openDialog.ShowDialog() Then
                ' all files are selected
                For Each fileName As String In openDialog.FileNames
                    Dim qItem As IPostItem = New FileQueueItem(fileName, "fileInfo[]")
                    fileUploadHandler.ListQueue.Add(qItem)
                Next
                btnUploadFiles.Enabled = False
                fileUploadHandler.RunWorkerAsync()
            End If
        End Using
    End Sub

    Private Sub OnUploadCompleted(sender As Object, e As RunWorkerCompletedEventArgs)
        btnUploadFiles.Enabled = True
    End Sub

    Private Sub OnReportProgress(sender As Object, e As ProgressChangedEventArgs)
        pbUploadProgress.Value = e.ProgressPercentage
        lblUploadProgress.Text = e.UserState
    End Sub

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        AddHandler fileUploadHandler.RunWorkerCompleted, AddressOf OnUploadCompleted
        AddHandler fileUploadHandler.ProgressChanged, AddressOf OnReportProgress
    End Sub
End Class

一旦单击OpenFileDialog中的“打开”按钮,文件就会立即上传。

关于你的第二个问题,要允许选择多个文件,你必须设置OpenFileDialog.Multiselect = True标志