0
170
ViewsAdministrar ediciones en FileUpload Control
Tengo una página de producto. Quiero agregar mi producto a mi base de datos y también quiero actualizar mi producto. Tengo un problema con las imágenes. Cuando inserto el producto, todo está bien. En mi página aspx tengo este código:
<span> <asp:FileUpload ID="files" runat="server" AllowMultiple="true" /> </span> <div runat="server" id="previewImages"></div>y cuando guardo mi producto, en el código detrás tengo este código:
string filenm = string.Empty; HttpFileCollection fileCollection = Request.Files; for (int i = 0; i < fileCollection.Count; i++) { HttpPostedFile uploadfile = fileCollection[i]; if (uploadfile.ContentLength > 0) { string filename = uploadfile.FileName; System.IO.Directory.CreateDirectory(Server.MapPath("immScarpe/" + txtStyle.Text)); file.SaveAs(Server.MapPath("immScarpe/" + txtStyle.Text + "/") + fileName); //this is pseudo-code INSERT INTO PRODUCT_IMM (IdProduct, Path) VALUES (Id, "immScarpe/" + txtStyle.Text + "/" + fileName) } }Ahora, el problema es que puedo EDITAR el producto guardado. Cuando hago clic en el botón de edición de un producto, tengo que cargar todos sus datos y dejar que el usuario los modifique. También las imágenes.
la pregunta principal es: ¿Cómo puedo cargar las imágenes guardadas en asp:FileUpload control?
Otra cosa que me gustaría hacer es mostrar vistas previas de imágenes... en inserción y en edición.
Un ejemplo de lo que quiero hacer es lo que hace Amazon. 
pero, si es posible con solo un FileUpload con AllowMultiple = true
Estoy dispuesto a usar otras tecnologías como javascript, jquery y Ajax si es necesario.
3 answers
Answer question0
Mostrar vista previa de imágenes - Insertar
<script src="jquery-1.10.1.min.js" type="text/javascript"></script> <script type="text/javascript"> function ShowpImagePreview(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#previewImage').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } </script> <asp:Image ID="previewImage" runat="server" /> <asp:FileUpload ID="FileUpload1" runat="server" onchange="ShowpImagePreview(this);" />0
Aquí hay un ejemplo muy básico de cómo puede manejar las imágenes después de haberlas enviado al servidor. En este fragmento, el nombre de archivo de la imagen está fijo, pero debería ser suficiente para impulsarlo en la dirección correcta.
protected void Page_Load(object sender, EventArgs e) { //check if the file exists and show if (File.Exists(Server.MapPath("testImage.jpg"))) { setImage("/testImage.jpg"); } } //upload a new image protected void Button1_Click(object sender, EventArgs e) { if (FileUpload1.HasFile) { try { FileUpload1.SaveAs(Server.MapPath("testImage.jpg")); setImage("/testImage.jpg"); } catch { //error writing file } } } //delete the image protected void LinkButton1_Click(object sender, EventArgs e) { try { File.Delete(Server.MapPath("testImage.jpg")); LinkButton1.Visible = false; Image1.Visible = false; } catch { //error deleteing file } } //set the image and show the delete link private void setImage(string image) { Image1.ImageUrl = "/testImage.jpg"; Image1.Visible = true; LinkButton1.Visible = true; }ASPX
<asp:Image ID="Image1" runat="server" Visible="false" /> <br /> <asp:LinkButton ID="LinkButton1" runat="server" Visible="false" OnClick="LinkButton1_Click">Delete image</asp:LinkButton> <br /> <br /> <asp:FileUpload ID="FileUpload1" runat="server" /> <br /> <asp:Button ID="Button1" runat="server" Text="Upload" OnClick="Button1_Click" />0
Para mostrar imágenes en GridView desde el disco
Ahora que tiene las imágenes que se muestran, desea tener alguna funcionalidad de reemplazo o eliminación en las imágenes. Debe convertir su campo en GridView para imagen en campo de plantilla. Puede hacer esto haciendo clic en la vista de origen de su página ASPX y reemplazando su ImageField o BoundField (cualquier campo que haya usado para mostrar la imagen).
Vea el diseño de GridView en la pregunta:
¿Cómo mostrar la imagen dentro del campo de plantilla de gridview sin usar la clase de controlador?
La forma de vincular la fuente de la imagen está en las respuestas de esa pregunta.
Para tener una funcionalidad de eliminación o reemplazo, puede incluir un control LinkButton dentro de su TemplateField debajo de la etiqueta que muestra la imagen.
Puede establecer la propiedad CommandName de LinkButton en 'Eliminar' o 'Reemplazar' y luego, en su archivo .vb o .cs, busque el evento 'RowCommand' para su GridView.
Es algo así como (solo pseudocódigo)
Protected Sub GridView_RowCommand(ByVal sender As Object, ByVal e As System.GridViewCommandEventArgs) Handles GridView.RowCommand If e.CommandName = 'Delete' Then 'Place your delete query for your image record on the database here.. 'Place your delete file from disk code here.. End If End SubMás información sobre el evento GridView RowCommand