更改输入类型="file"中的默认文本?

这里是如何用bootstrap完成的，只是你应该把原始输入放在某个地方…idk 在头部，如果你有< br >，删除它，因为它只是隐藏和占用空间:)

<head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> </head> <label for="file" button type="file" name="image" class="btn btn-secondary">Secondary</button> </label> <input type="file" id="file" name="image" value="Prebrskaj" style="visibility:hidden;"> <footer> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </footer>

2020-04-30 16:45:57

Below is an example of a stylized upload button that will read an image, compress it, and download the resulting image. It works by hiding the actual input element, and then through some trickery we make it so that when you click on our fake file uploader it uses the actual input element to pop up the window for choosing a file. By using this method we get 100% control over how the file uploader looks since we are using our own element instead of styling the file upload menu. It also makes it easy to add drag and drop functionality in the future if we ever want to do that.

然后我写了一系列关于这个文件上传按钮的博文。

'use strict' var AMOUNT = 10 var WIDTH = 600 var HEIGHT = 400 var canvas = document.getElementById('canvas') canvas.width = WIDTH canvas.height = HEIGHT //here's how I created the clickable area //user clicks the clickable area > we send a click event //to the file opener > the file opener clicks on the open //file button > the open file dialogue pops up function clickableAreaListener(e){ let clickEvent = new CustomEvent("click",{"from":"fileOpenerHandler"}); document.getElementById("fileOpener").dispatchEvent(clickEvent); } function fileOpenerListener(e) { document.getElementById("file-btn").click(); e.preventDefault(); } function fileSelectedListener(e){ readFiles(e.target.files); } document.getElementById('file-btn').addEventListener('change', fileSelectedListener); document.getElementById("clickable-area").addEventListener('click', clickableAreaListener); document.getElementById("fileOpener").addEventListener("click", fileOpenerListener); function readFiles(files){ files = [].slice.call(files); //turning files into a normal array for (var file of files){ var reader = new FileReader(); reader.onload = createOnLoadHandler(file); reader.onerror = fileErrorHandler; //there are also reader.onloadstart, reader.onprogress, and reader.onloadend handlers reader.readAsDataURL(file); } } function fileErrorHandler(e) { switch(e.target.error.code) { case e.target.error.NOT_FOUND_ERR: throw 'Image not found'; break; case e.target.error.NOT_READABLE_ERR: throw 'Image is not readable'; break; case e.target.error.ABORT_ERR: break; default: throw 'An error occurred while reading the Image'; }; } function createOnLoadHandler(file){ console.log('reading ' + file.name + ' of type ' + file.type) //file.type will be either image/jpeg or image/png function onLoad(e){ var data = e.target.result display(data); var compressedData = compressCanvas(AMOUNT) download(compressedData) } return onLoad } function display(data){ var img = document.createElement('img'); img.src = data; var context = canvas.getContext('2d') context.clearRect(0, 0, WIDTH, HEIGHT); context.drawImage(img, 0, 0, WIDTH, HEIGHT); } function compressCanvas(){ return canvas.toDataURL('image/jpeg', AMOUNT / 100); } function download(data) { function b64toBlob(b64Data, contentType, sliceSize) { contentType = contentType || ''; sliceSize = sliceSize || 512; var byteCharacters = atob(b64Data); var byteArrays = []; for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) { var slice = byteCharacters.slice(offset, offset + sliceSize); var byteNumbers = new Array(slice.length); for (var i = 0; i < slice.length; i++) { byteNumbers[i] = slice.charCodeAt(i); } var byteArray = new Uint8Array(byteNumbers); byteArrays.push(byteArray); } var blob = new Blob(byteArrays, {type: contentType}); return blob; } var chromeApp = Boolean(chrome && chrome.permissions) if (chromeApp){ chrome.fileSystem.chooseEntry({type:'openDirectory'}, function(entry) { chrome.fileSystem.getWritableEntry(entry, function(entry) { entry.getFile('example.jpg', {create:true}, function(entry) { entry.createWriter(function(writer){ writer.write(b64toBlob(data.slice(23), 'image/jpg')) }) }) }) }) } else { let a = document.createElement("a"); a.href = data; a.download = 'downloadExample.jpg' document.body.appendChild(a) a.click(); window.URL.revokeObjectURL(a.href); a.remove() } } .fileInput { display: none; position: absolute; top: 0; right: 0; font-size: 100px; } #clickable-area{ background: #ccc; width: 500px; display: flex; margin-bottom: 50px; } #clickable-area-text{ margin: auto; } .yellow-button { cursor: pointer; color: white; background: #f1c40f; height: 30px; width: 120px; padding: 30px; font-size: 22px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } <div id="clickable-area"> <a id='fileOpener'> </a> <input type="file" class="fileInput" id="file-btn" accept="image/*" multiple/> <div class="yellow-button"><span>Shrink Image</span> </div><p id="clickable-area-text">( you can click anywhere in here )  </p> </div> <canvas id="canvas"></canvas>

Stack Overflow的限制似乎阻止了代码片段实际压缩和下载文件。这里完全相同的代码显示了完整的上传/压缩/下载过程实际上按预期工作。

2016-04-08 01:52:08

这应该可以工作:

input.*className*::-webkit-file-upload-button {
  *style content..*
}

2015-09-29 10:56:15

我做了一个脚本，并在GitHub上发布:get selectFile.js 易于使用，随时克隆。

超文本标记语言

<input type=file hidden id=choose name=choose>
<input type=button onClick=getFile.simulate() value=getFile>
<label id=selected>Nothing selected</label>

JS

var getFile = new selectFile;
getFile.targets('choose','selected');

演示

jsfiddle.net/Thielicious/4oxmsy49/

2017-06-10 14:06:51

这里是如何用bootstrap完成的，只是你应该把原始输入放在某个地方…idk 在头部，如果你有< br >，删除它，因为它只是隐藏和占用空间:)

<head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> </head> <label for="file" button type="file" name="image" class="btn btn-secondary">Secondary</button> </label> <input type="file" id="file" name="image" value="Prebrskaj" style="visibility:hidden;"> <footer> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </footer>

2020-04-30 16:45:57

每个浏览器都有自己的控件呈现方式，因此您不能更改控件的文本或方向。

如果你想要一个html/css的解决方案，而不是Flash或silverlight的解决方案，你可能想尝试一些“类型”的技巧。

http://www.quirksmode.org/dom/inputfile.html

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

就我个人而言，因为大多数用户坚持使用他们所选择的浏览器，因此可能习惯于在默认呈现中看到控件，如果他们看到不同的内容(取决于您所处理的用户类型)，他们可能会感到困惑。

2011-02-28 07:38:42

更改输入类型="file"中的默认文本?

推荐文章

最新文章

标签