上传多个文件时,文件名显示在带有删除按钮的文本框中
when upload multiple file, file name show in text box with a delete button
当用户浏览多个文件时,所有文件名都会显示在文本框中,右侧会有一个删除按钮(一个X),以便用户删除文件。
我找到了将多个文件上传到文本框的编码,但效果不佳。
最终结果应该如下图所示
<FORM METHOD="post" ACTION="xxx@gmail.com" ENCTYPE="multipart/form-data">
<input id="uploadFile" placeholder="Add files from My Computer" class="steptextboxq3"/>
<div class="fileUpload btn btn-primary">
<span>Browse</span>
<input id="uploadBtn" type="file" class="upload" multiple="multiple" name="browsefile"/>
</div>
<input id="filename" type="text" />
<div id="upload_prev"></div>
<div style="clear:both;"></div>
<div class="buttonwrap">
<a href="contactus.html" class="buttonsend" style="float:right;">Send </a>
</div>
</FORM>
这是我的脚本
document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.value;
};
document.getElementById('uploadBtn').onchange = uploadOnChange;
function uploadOnChange() {
var filename = this.value;
var lastIndex = filename.lastIndexOf("\");
if (lastIndex >= 0) {
filename = filename.substring(lastIndex + 1);
}
var files = $('#uploadBtn')[0].files;
for (var i = 0; i < files.length; i++) {
$("#upload_prev").append(files[i].name);
}
document.getElementById('filename').value = filename;
}
这里是fiddle
http://jsfiddle.net/WWNnV/629/
这里是浏览的fiddle,浏览旁边的文本框要改文字,如下图fiddle
http://jsfiddle.net/ccsGK/1731/
我认为脚本彼此崩溃,因此无法正常工作。
关于发送按钮,发送到提供的gmail后应该link到联系页面。
谢谢。
html
<FORM METHOD="post" ACTION="xxx@gmail.com" ENCTYPE="multipart/form-data">
<input id="uploadFile" placeholder="Add files from My Computer" class="steptextboxq3" />
<div class="fileUpload btn btn-primary">
<span>Browse</span>
<input id="uploadBtn" type="file" class="upload" multiple="multiple" name="browsefile" />
</div>
<input id="filename" type="text" />
<div id="upload_prev"></div>
<div style="clear:both;"></div>
</FORM>
<div class="buttonwrap">
<a href="#" class="buttonsend" style="float:right;">Send </a>
</div>
js
// define `files` , `res` variables
var files, res;
document.getElementById("uploadBtn").onchange = function (e) {
e.preventDefault();
document.getElementById("uploadFile").value = this.value;
};
document.getElementById('uploadBtn').onchange = uploadOnChange;
function uploadOnChange() {
var filename = this.value;
var lastIndex = filename.lastIndexOf("\");
if (lastIndex >= 0) {
filename = filename.substring(lastIndex + 1);
}
files = $('#uploadBtn')[0].files;
// set `res` to array of file objects
res = Array.prototype.slice.call(files);
for (var i = 0; i < files.length; i++) {
$("#upload_prev")
.append("<span>" + files[i].name + "</span> <b>X</b><br>");
}
document.getElementById('filename').value = filename;
}
// remove `file` from `res`
// e.g., click `X` to remove file from `res`
$(document).on("click", "#upload_prev span", function () {
if (res.length) {
res.splice($(this).index(), 1);
$(this).remove();
}
console.log(res);
});
// send adjusted `res` array of file objects to server
$(".buttonsend").on("click", function (e) {
// $.post($("form").attr("action"), res)
// e.preventDefault();
// e.stopPropagation();
if (res.length) {
$.post("/echo/json/", {
json: JSON.stringify(res)
}).then(function (data) {
console.log(data)
})
}
})
jsfiddle http://jsfiddle.net/WWNnV/633/
js
最初由 @guest271314 在 jsfiddle:
发布
var files, res;
document.getElementById("uploadBtn").onchange = function (e) {
e.preventDefault();
document.getElementById("uploadFile").value = this.value;
};
document.getElementById('uploadBtn').onchange = uploadOnChange;
function uploadOnChange() {
var filename = this.value;
var lastIndex = filename.lastIndexOf("\");
if (lastIndex >= 0) {
filename = filename.substring(lastIndex + 1);
}
files = $('#uploadBtn')[0].files;
res = Array.prototype.slice.call(files);
for (var i = 0; i < files.length; i++) {
$("#upload_prev").append("<span>" + files[i].name + "</span> <b>X</b><br>");
}
document.getElementById('filename').value = filename;
}
$(document).on("click", "#upload_prev span", function () {
res.splice($(this).index(), 1);
$(this).remove();
console.log(res);
});
$(".buttonsend").on("click", function (e) {
// $.post($("form").attr("action"), res)
// e.preventDefault();
// e.stopPropagation();
if (res.length) $.post("/echo/json/", {
json: JSON.stringify(res)
}).then(function (data) {
console.log(data)
})
})
一些 css
span {
float: left;
display: flex;
width: 100%;
}
p.closed {
margin: 0 0 0 7px;
cursor: pointer;
}
当用户浏览多个文件时,所有文件名都会显示在文本框中,右侧会有一个删除按钮(一个X),以便用户删除文件。
我找到了将多个文件上传到文本框的编码,但效果不佳。
最终结果应该如下图所示
<FORM METHOD="post" ACTION="xxx@gmail.com" ENCTYPE="multipart/form-data">
<input id="uploadFile" placeholder="Add files from My Computer" class="steptextboxq3"/>
<div class="fileUpload btn btn-primary">
<span>Browse</span>
<input id="uploadBtn" type="file" class="upload" multiple="multiple" name="browsefile"/>
</div>
<input id="filename" type="text" />
<div id="upload_prev"></div>
<div style="clear:both;"></div>
<div class="buttonwrap">
<a href="contactus.html" class="buttonsend" style="float:right;">Send </a>
</div>
</FORM>
这是我的脚本
document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.value;
};
document.getElementById('uploadBtn').onchange = uploadOnChange;
function uploadOnChange() {
var filename = this.value;
var lastIndex = filename.lastIndexOf("\");
if (lastIndex >= 0) {
filename = filename.substring(lastIndex + 1);
}
var files = $('#uploadBtn')[0].files;
for (var i = 0; i < files.length; i++) {
$("#upload_prev").append(files[i].name);
}
document.getElementById('filename').value = filename;
}
这里是fiddle
http://jsfiddle.net/WWNnV/629/
这里是浏览的fiddle,浏览旁边的文本框要改文字,如下图fiddle http://jsfiddle.net/ccsGK/1731/
我认为脚本彼此崩溃,因此无法正常工作。
关于发送按钮,发送到提供的gmail后应该link到联系页面。
谢谢。
html
<FORM METHOD="post" ACTION="xxx@gmail.com" ENCTYPE="multipart/form-data">
<input id="uploadFile" placeholder="Add files from My Computer" class="steptextboxq3" />
<div class="fileUpload btn btn-primary">
<span>Browse</span>
<input id="uploadBtn" type="file" class="upload" multiple="multiple" name="browsefile" />
</div>
<input id="filename" type="text" />
<div id="upload_prev"></div>
<div style="clear:both;"></div>
</FORM>
<div class="buttonwrap">
<a href="#" class="buttonsend" style="float:right;">Send </a>
</div>
js
// define `files` , `res` variables
var files, res;
document.getElementById("uploadBtn").onchange = function (e) {
e.preventDefault();
document.getElementById("uploadFile").value = this.value;
};
document.getElementById('uploadBtn').onchange = uploadOnChange;
function uploadOnChange() {
var filename = this.value;
var lastIndex = filename.lastIndexOf("\");
if (lastIndex >= 0) {
filename = filename.substring(lastIndex + 1);
}
files = $('#uploadBtn')[0].files;
// set `res` to array of file objects
res = Array.prototype.slice.call(files);
for (var i = 0; i < files.length; i++) {
$("#upload_prev")
.append("<span>" + files[i].name + "</span> <b>X</b><br>");
}
document.getElementById('filename').value = filename;
}
// remove `file` from `res`
// e.g., click `X` to remove file from `res`
$(document).on("click", "#upload_prev span", function () {
if (res.length) {
res.splice($(this).index(), 1);
$(this).remove();
}
console.log(res);
});
// send adjusted `res` array of file objects to server
$(".buttonsend").on("click", function (e) {
// $.post($("form").attr("action"), res)
// e.preventDefault();
// e.stopPropagation();
if (res.length) {
$.post("/echo/json/", {
json: JSON.stringify(res)
}).then(function (data) {
console.log(data)
})
}
})
jsfiddle http://jsfiddle.net/WWNnV/633/
js
最初由 @guest271314 在 jsfiddle:
var files, res; document.getElementById("uploadBtn").onchange = function (e) { e.preventDefault(); document.getElementById("uploadFile").value = this.value; }; document.getElementById('uploadBtn').onchange = uploadOnChange; function uploadOnChange() { var filename = this.value; var lastIndex = filename.lastIndexOf("\"); if (lastIndex >= 0) { filename = filename.substring(lastIndex + 1); } files = $('#uploadBtn')[0].files; res = Array.prototype.slice.call(files); for (var i = 0; i < files.length; i++) { $("#upload_prev").append("<span>" + files[i].name + "</span> <b>X</b><br>"); } document.getElementById('filename').value = filename; } $(document).on("click", "#upload_prev span", function () { res.splice($(this).index(), 1); $(this).remove(); console.log(res); }); $(".buttonsend").on("click", function (e) { // $.post($("form").attr("action"), res) // e.preventDefault(); // e.stopPropagation(); if (res.length) $.post("/echo/json/", { json: JSON.stringify(res) }).then(function (data) { console.log(data) }) })
一些 css
span {
float: left;
display: flex;
width: 100%;
}
p.closed {
margin: 0 0 0 7px;
cursor: pointer;
}