基于FineUploader的图片上传实现方案
在Web应用中，通过FineUploader组件结合MVC与Ajax技术可高效完成图片上传功能。以下为具体实现步骤。
引入必要资源
<link href="@Url.Content("~/Scripts/uploader/fine-uploader.min.css")" rel="stylesheet" />
<script src="@Url.Content("~/Scripts/uploader/fine-uploader.min.js")"></script>前端HTML结构
<div id="triggerUpload">
<a href="javascript:void(0);">
<img src="@Url.Content("~/Content/img/default-thumb.png")" alt="点击上传" />
</a>
<span style="color: #999;">封面图</span>
</div>
<div class="preview-panel" id="imagePreview" style="display:none; right:25px;">
<div class="mask-layer"></div>
<div class="preview-content">
<h2 id="previewTitle">图像预览</h2>
<div class="preview-area">
<img id="previewTarget" style="width: 175px;" src="@Model.Thumbnail" alt="预览" />
<input type="hidden" id="imagePath" value="" />
</div>
<div class="action-buttons">
<p><a href="javascript:void(0)" id="removeImage">移除</a></p>
</div>
</div>
</div>JavaScript初始化逻辑
$(function() {
var currentImageUrl = "";
$("#triggerUpload").on("click", function() {
initUploader(this);
});
$("#removeImage").on("click", removeSelectedImage);
function initUploader(target) {
const config = {
element: target,
request: { endpoint: '/api/upload/temp-image' },
text: {
uploadButton: "更换封面",
dragZone: "拖拽上传",
dropProcessing: "正在处理..."
},
template: `
<div class="uploader-container">
<span>{dragZoneText}</span>
<button class="upload-btn">{uploadButtonText}</button>
<ul class="file-list"></ul>
</div>`,
multiple: false,
validation: { allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'] },
callbacks: {
onComplete: function(id, name, result) {
if (result.success) {
currentImageUrl = result.path;
$("#previewTarget").attr("src", result.path + "?size=T116x170");
$("#imagePath").val(currentImageUrl);
$("#imagePreview").fadeIn(300);
adjustPreviewSize('#imagePreview', 211, 1280);
} else {
alert("上传失败，请稍后再试。");
}
}
}
};
new qq.FineUploader(config);
}
function removeSelectedImage() {
$.post("/api/upload/remove-temp", { path: currentImageUrl })
.done(function(res) {
if (res === "OK") {
currentImageUrl = "";
$("#imagePreview").fadeOut(300);
$("#previewTarget").attr("src", "");
$("#imagePath").val("");
} else {
alert("删除失败");
}
})
.fail(function() {
alert("网络异常，请重试");
});
}
});服务端路由配置（web.config）
<system.webServer>
<handlers>
<add name="TempImageHandler"
verb="*"
path="/api/upload/temp-image"
type="YourApp.Handlers.TempImageUploadHandler, YourApp" />
</handlers>
</system.webServer>服务端需实现对应的HTTP处理器以接收并存储上传文件，此处省略具体实现。
