Krajee bootstrap fileinput-Afficher l'image de la base de données

J'utilise le plugin Krajee bootstrap fileinput pour télécharger des images pendant le processus d'enregistrement des employés. L'image est enregistrée dans un dossier du projet et le chemin est enregistré dans la base de données. Lors de la modification de l'employé, je souhaite afficher l'image téléchargée à partir de la base de données.Krajee bootstrap fileinput-Afficher l'image de la base de données

Ma question est comment puis-je montrer l'image de la base de données.

Structure Db est

EmployeeId  PhotoUrl 

    1    ~/UploadImages/Employee/Photo/Emp1.jpg

J'ai l'exemple de code à partir du site

$(document).on('ready', function() { 
$("#input-24").fileinput({ 
    initialPreview: [ 
     '<img src="/images/moon.jpg" class="file-preview-image" alt="The Moon" title="The Moon">', 
     '<img src="/images/earth.jpg" class="file-preview-image" alt="The Earth" title="The Earth">' 
    ], 
    overwriteInitial: false, 
    maxFileSize: 100, 
    initialCaption: "The Moon and the Earth" 
});

});

Comment puis-je obtenir intialPreview de la base de données?

HTML balisage

<div class=" form-group "> 
    <label for="txtPhoto" class=" control-label"> 
    Photo 
    </label> 
    <label class="reqdLabel"> 
    * 
    </label> 
    @Html.TextBoxFor(m => m.PhotoUrl, new { @class = "form-control imgUpload", @placeholder = "Please upload Photo", @id = "txtPhoto", @type = "file" }) 

    @Html.ValidationMessageFor(m => m.PhotoUrl) 

</div>

JQuery pour appeler FileInput

//fileUpload plugin 
$(".imgUpload").fileinput({ 
    showUpload: false, 
    //How can I set value here 
    initialPreview: [ 
     '<img src="~/UploadImages/Employee/AddressProof/Emp16.jpg" class="file-preview-image" alt="The Moon" title="The Moon">'   
    ], 
    overwriteInitial: false, 
    initialCaption: "Emp16.jpg" 
});

Source

2015-10-28 ksg

Avez-vous un modèle/modèle de vue pour l'employé? Il devrait contenir une propriété disant 'IEnumerable PhotoUrl' pour la collection d'URL afin que vous puissiez les assigner dans la vue. –

Ok, je l'ai compris. Je dois créer un 'tag d'image 'séparé dans la vue et mettre le' src' à 'PhotoUrl'. Est-il possible de montrer l'image ci-dessus fileinput lui-même? – ksg

Un employé peut-il avoir plusieurs images (ou une seule)? –

Pour affecter l'image initiale, vous pouvez utiliser

$(".imgUpload").fileinput({ 
    showUpload: false, 
    initialPreview: [ 
    '<img src="@Model.PhotoUrl" class="file-preview-image" .... >'   
    ], 
    .... 
});

Cependant, vous utilisez des @Html.TextBoxFor(m => m.PhotoUrl, ...) ne fonctionnera pas car type="file" postes de retour à typeof HttpPostedFileBase mais la propriété PhotoUrl est typeof string.

Vous pouvez générer manuellement le code html

<input type="file", name="photoFile" class="imgUpload" ... />

et la méthode POST comprendrait un paramètre pour le fichier téléchargé

[HttpPost] 
public ActionResult Edit(Employee model, HttpPostedFileBase photoFile)

ou mieux, utilisez un modèle de vue qui contient des propriétés pour l'url et le fichier

public class EmployeeVM 
{ 
    public string PhotoUrl { get; set; } 
    public HttpPostedFileBase PhotoFile { get; set; } 
    .... // other properties 
}

et dans la vue

@Html.TextBoxFor(m => m.PhotoFile, new { type = "file", @class = "imgUpload" })

Source

2015-10-29 07:21:26

Krajee bootstrap fileinput-Afficher l'image de la base de données

Répondre

Questions connexes