我有以下代码,现在工作正常。现在我要改变它一点,要求用户在上传到服务器之前输入文件名?我们怎么能这样做?
<span class="btn btn-primary fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>@(i18n_Models_Image.AddImages + "...")</span>
<input id="fileupload" type="file" name="files[]" accept="image/*" >
</span>
$(document).ready(function() {
$('#fileupload').fileupload({
dataType: 'json',
url: '../admin/image/uploadfiles',
autoUpload: true,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
success: function(data, status, xhr) {
window.location = data.url;
},
error: function(xhr, textStatus, errorThrown) {
if (errorThrown === 'abort') {
alert('@i18n_Models_Image.UploadCancelled');
}
}
}).on('fileuploadprogressall', function(e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('.progress .progress-bar').css('width', progress + '%');
}); });
答案 0 :(得分:0)
请看下面两个例子:
的示例1)使用自动上传时的情况
<强>型号:强>
public class MyModel
{
public HttpPostedFileBase MyFile { get; set; }
}
查看:强>
@model MyModel
<form>
<input type="text" name="FileName" />
<div>@Html.TextBoxFor(m => m.MyFile, new { id = "fu-my-auto-upload", type = "file" })</div>
</form>
<强> JavaScript的:强>
<script type="text/javascript">
var jqXHRData;
$(document).ready(function () {
initAutoFileUpload();
});
function initAutoFileUpload() {
'use strict';
$('#fu-my-auto-upload').fileupload({
autoUpload: true,
url: '/File/UploadFile',
dataType: 'json',
add: function (e, data) {
var jqXHR = data.submit()
.success(function (data, textStatus, jqXHR) {
})
.error(function (data, textStatus, errorThrown) {
if (typeof (data) != 'undefined' || typeof (textStatus) != 'undefined' || typeof (errorThrown) != 'undefined') {
alert(textStatus + errorThrown + data);
}
});
},
fail: function (event, data) {
if (data.files[0].error) {
alert(data.files[0].error);
}
}
});
}
</script>
<强>控制器:强>
[HttpPost]
public virtual ActionResult UploadFile(string fileName)
{
HttpPostedFileBase myFile = Request.Files["MyFile"];
//Save file
return Json(new { isUploaded = true });
}
2)AutoUploading = false时的情况
<强>型号:强>
public class MyModel
{
public HttpPostedFileBase MyFile { get; set; }
}
查看:强>
@model MyModel
<form>
<input type="text" name="FileName" />
<div>@Html.TextBoxFor(m => m.MyFile, new { id = "fu-my-simple-upload", type = "file" }) <a href="#" id="hl-start-upload">Start upload</a> </div>
</form>
<强> JavaScript的:强>
<script type="text/javascript">
var jqXHRData;
$(document).ready(function () {
initSimpleFileUpload();
$("#hl-start-upload").on('click', function (e) {
if (jqXHRData) {
jqXHRData.submit();
}
return false;
});
});
function initSimpleFileUpload() {
'use strict';
$('#fu-my-simple-upload').fileupload({
url: '/File/UploadFile',
dataType: 'json',
add: function (e, data) {
jqXHRData = data
},
done: function (event, data) {
},
fail: function (event, data) {
if (data.files[0].error) {
alert(data.files[0].error);
}
}
});
}
</script>
<强>控制器:强>
[HttpPost]
public virtual ActionResult UploadFile(string fileName)
{
HttpPostedFileBase myFile = Request.Files["MyFile"];
//Save file
return Json(new { isUploaded = true });
}