Question

我有以下HTML代码用于显示＆＃34;浏览＆＃34;或＆＃34;选择文件＆＃34;按钮：

<input type="file" name="file" id="file">

Answer 1

使用按钮和范围创建div：

<div>
<input type="button" onclick="document.getElementById('fu').click()" 
value="Click to select file" />
<span id="fileName"></span>
</div>

将可见的div放在名为＆＃39; fu＆＃39;

的文件上传中

<input type="file" id="fu" onchange="FileSelected()" style="width: 0;">

并添加此脚本：

function FileSelected(e)
{
    file = document.getElementById('fu').files[document.getElementById('fu').files.length - 1];
    document.getElementById('fileName').innerHtml= file.name;
}

你还有另外一些有用的东西，比如file.type和file.size来显示。

Answer 2

尝试使用变通方法，而不是更改输入元素的文本和默认参数。

<div class="file">
    <label for="file-input">Pick a file</label>
    <input type="file" id="file-input">
</div>

通过风格设计：

.file { position: relative; height: 30px; width: 100px; }
.file > input[type="file"] { position: absoulte; opacity: 0; top: 0; left: 0; right: 0; bottom: 0 }
.file > label { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-color: #666; color: #fff; line-height: 30px; text-align: center; cursor: pointer; }

Working Demo

Answer 3

您可以增加width的{{1}}并将.file > label { width: 113px; }放入opacity: 0;。

Answer 4

使用HTML输入按钮显示所需的文本。保持“输入类型=文件”不可见。单击按钮后，调用单击事件“输入类型=文件”。选择文件后，使用“输入类型=文件”的onchange事件在按钮旁边显示所选文件的名称。

<apex:page controller="AttachFileCtlr">
    <apex:form>
        <apex:actionFunction name="saveAF" action="{!saveMethod}" reRender="attchFilePanel">
            <apex:param assignTo="{!fileName}" value="" name="fileName"/>
            <apex:param assignTo="{!fileValue}" value="" name="fileValue"/>
            <apex:param assignTo="{!contentType}" value="" name="contentType"/>
        </apex:actionFunction>
        <apex:pageBlock id="pageBlock1">
            <apex:outputPanel id="attchFilePanel">
                <input type="button" id="loadFileXml" value="Attach File" onclick="document.getElementById('file').click();"/>
                <p id="displayFileName" style="font-size:15px;"></p>
                <input type="file" id="file" name="attFile" style="display:none;" onchange="fileChosenFunc();"/>
                <apex:commandButton value="Save" onclick="saveFunc1(); return false;"/>
            </apex:outputPanel>
        </apex:pageBlock>
    </apex:form>
    <script>
    function fileChosenFunc()
    {
        var file1 = document.getElementById('file');
        if(file1 != null && 'files' in file1 && file1.files.length == 1)
        {    
            alert('one file chosen, name can be displayed');
            document.getElementById("displayFileName").innerHTML = file1.files[0].name;
        }
    }
    function saveFunc1()
    {
        var fileName = null;
        var file1 = document.getElementById('file');
        if(file1 != null)
        {
            if('files' in file1)
            {
                if(file1.files.length == 1)
                {
                    alert('one file attached');
                    var file1Obj = file1.files[0];
                    if(file1Obj.name != '')
                    {
                        fileName = file1Obj.name;
                    } 
                    var reader = new FileReader();
                    reader.onload = function() {
                        var fileContent = reader.result;
                        var base64 = 'base64,';
                        var dataStart = fileContent.indexOf(base64) + base64.length;
                        fileContent = fileContent.substring(dataStart);
                        var encodedFileContent = encodeURIComponent(fileContent);
                        saveAF(fileName, encodedFileContent, file1Obj.type);                
                    }
                    reader.readAsDataURL(file1Obj);    
                }
                else
                {
                    alert('no file attached');    
                }
            }    
        }
    }
    </script>
</apex:page>
Controller class :-
public class AttachFileCtlr {
    public String fileName {get;set;}
    public transient String fileValue {get;set;}
    public String contentType {get;set;}
    public Attachment attachment {
        get {
            if(attachment == null)
                attachment = new Attachment();
            return attachment;
        }
        set;
    }
    // Constructor
    public AttachFileCtlr()
    {
        fileName = '';
        fileValue = '';
        contentType = '';
    }
    public PageReference saveMethod()
    {
        if(attachment != null && fileName != null && fileName != ''
            && fileValue != null && fileValue != '')
        {
            try
            {
                attachment.ownerId = UserInfo.getUserId();
                attachment.ParentId = '5002C000006zvjyQAA'; // Case id on which attachment is to be attached
                attachment.Name = fileName;
                fileValue = EncodingUtil.urlDecode(fileValue, 'UTF-8');
                attachment.Body = EncodingUtil.base64Decode(fileValue);
                attachment.ContentType = contentType;
                insert attachment;
            }
            catch (DMLException e) {
                System.debug(LoggingLevel.INFO, '#### error occurred while adding attachment to case ' + e.getMessage());
            }
            finally
            {
                attachment = new Attachment(); 
            }
        }
        else
        {
            System.debug(LoggingLevel.INFO, '#### no attachment adding to case');
        }
        return null;
    }           
}

如何更改＆＃34;选择文件＆＃34;或＆＃34;浏览＆＃34;按钮文字和＆＃34;没有选择文件＆＃34;文本。例：

4 个答案: