Qual a melhor maneira de resolver isso? Eu queria que as imagens voltassem também.
Usando o Backload. É um pacote que faz o gerenciamento de uma sessão de upload de arquivos no ASP.NET (pode ser MVC ou Web Forms).
Um exemplo usando jQuery File Upload, retirado do próprio GitHub do Backload:
@using System.Web.Optimization
@{
ViewBag.Title = "Exemplo de Upload";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section styles {
<!-- bootstrap styles -->
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<!-- Styles for the jQquery File Upload Plugin in Basic Plus UI style -->
@Styles.Render("~/backload/blueimp/bootstrap/BasicPlus/css")
<!-- The main application styles -->
<link href="~/Content/demo.styles.css" rel="stylesheet" />
}
<!-- Start of the render section -->
<div class="container">
<br>
<blockquote>
<p>
File Upload widget with multiple file selection, drag&drop support, progress bar, validation and preview images, audio and video for jQuery.
Supports cross-domain, chunked and resumable file uploads and client-side image resizing.
</p>
</blockquote>
<br>
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<!-- The file input field used as target for the file upload widget -->
<input id="fileupload" type="file" name="files[]" multiple>
</span>
<br>
<br>
<!-- The global progress bar -->
<div id="progress" class="progress">
<div class="progress-bar progress-bar-success"></div>
</div>
<!-- The container for the uploaded files -->
<div id="files" class="files"></div>
<br>
</div>
<!-- End of the render section -->
@section scripts {
<!-- Bootstrap script -->
<script src="~/Scripts/bootstrap.min.js"></script>
<!-- Scripts for the jQquery File Upload Plugin in Basic Plus UI style* -->
@Scripts.Render("~/backload/blueimp/bootstrap/BasicPlus")
<!-- The demo application script -->
<script src="/Scripts/demos.blueimp.basicplus.js"></script>
}
O arquivo demos.blueimp.basicplus.js
contém o seguinte (adaptado e traduzido por mim):
/*jslint unparam: true */
/*global window, $ */
$(function () {
'use strict';
// O Backload é um produto freemium, então algumas funcionalidades são fechadas.
// O FileHandlerController é o controlador da sua sessão de upload.
// No exemplo, definimos uma sessão de upload por um objectContext.
// Esse objectContext deve ser definido pela sua aplicação. No exemplo,
// foi definido com esse valor 'C5F260DD3787'.
var url = '/Backload/FileHandler?objectContext=C5F260DD3787';
$('#fileupload').fileupload({
url: url,
dataType: 'json',
autoUpload: false,
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator && navigator.userAgent),
previewCrop: true,
maxChunkSize: 10000000 // Opcional: tamanho de cada bloco de arquivo, em bytes, para facilitar uploads grandes.
})
.bind('fileuploadsubmit', function (e, data) {
// Opcional: aqui geramos um uuid para identificar qual bloco de arquivo estamos enviando. O Backload reagrupa cada bloco de arquivo sozinho.
data.formData = { uuid: Math.random().toString(36).substr(2, 8) };
})
// Aqui é a inicialização do tema Basic Plus do jQuery File Upload (https://blueimp.github.io/jQuery-File-Upload/basic-plus.html)
.data('blueimp-fileupload').initTheme("BasicPlus");
});
Se ModelState.IsValid
for true
, você pode acessar o diretório do objectContext
usando classes do namespace System.IO
, manipular seus arquivos e depois excluir o diretório.
O local deste diretório pode ser definido pela configuração. Meus arquivos Web.Backload.config
normalmente são assim:
<?xml version="1.0"?>
<backload xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:name="urn:backload-schema" xsi:noNamespaceSchemaLocation="Config\Web.Backload.xsd">
<fileSystem filesRoot="~/Uploads/Temp" />
</backload>
html5
pode ser menos traumático para o cenário dito. Não tem como voltar as imagens depois de enviar.