I have the following html code, which allow you to select Multiple files:
<input id="uploadFiles" type="file" name="myfiles" multiple="multiple" onchange="selectMulitableFiles(this)">
here is the onchange funcion:
function selectMulitableFiles(e) {
$.each(e.files, function () {
var tempelete = '<tr><td><img onload="loadImage(this);" alt="" src=' + this.name + ' style="border-style: solid; border-width: 1px; width: 60px; height: 60px;" /></td></tr>';
$("#tblImages tbody").append(tempelete);
});
}
What i am trying to achieve is to view all these selected images to the images that i generate and then write inside a control, but e.value will give you only the fake path.
Is what i am trying to do possible or not ?
here if ur solution
you need to use FileReader() to give image src ..
function selectMulitableFiles(e) {
$.each(e.files, function () {
var reader = new FileReader();
reader.onload = function (e) {
var tempelete = '<tr><td><img onload="loadImage(this);" alt="" src=' + e.target.result + ' style="border-style: solid; border-width: 1px; width: 60px; height: 60px;" /></td></tr>';
$("#tblImages tbody").append(tempelete);
}
reader.readAsDataURL(e.files[0]);
});
}
JSBIN Example
Related
I try to change text of file upload control browse button. I made file upload control visible=false and I added another textbox and button:
.aspx file:
<asp:FileUpload ID="fuUploadPhoto" runat="server" visible="false"/>
<asp:TextBox ID="tbFilePath" runat="server" />
<asp:Button ID="btnChooseFile" runat="server" Text="Choose file from disk" />
next I try to add Attribute to btnChooseFile in PageLoad in .cs. Unfortunately it doesn't work and I don't know why. Where I made a mistake?
.cs file:
protected void Page_Load(object sender, EventArgs e)
{
btnChooseFile.Attributes.Add("onclick", "document.getElementById(" + fuUploadPhoto.ClientID + ").click()");
MultiViewAddPhoto.SetActiveView(viewAddPhotoStepOne);
}
protected void btnChooseFile_Click(object sender, EventArgs e)
{
if (fuUploadPhoto.HasFile)
{
tbFilePath.Text = fuUploadPhoto.PostedFile.FileName;
string filename = Path.GetFileName(fuUploadPhoto.FileName);
string ext = Path.GetExtension(filename);
imageGuid = Guid.NewGuid();
string contenttype = String.Empty;
switch (ext)
{
case ".jpg":
contenttype = "image/jpg";
break;
case ".jpeg":
contenttype = "image/jpg";
break;
case ".png":
contenttype = "image/png";
break;
}
if (string.IsNullOrEmpty(contenttype))
{
ltrErrorMessage.Text = "Nieprawidłowy format pliku!";
}
//prawidłowy format pliku
else
{
if (fuUploadPhoto.PostedFile.ContentLength > MyConsts.DAL.SizeOfPhoto)
{
ltrErrorMessage.Text = "Plik może mieć maksymalnie "+ MyConsts.DAL.SizeOfPhoto/1024 + " Mb! Zmniejsz plik i spróbuj ponownie.";
}
//jeśli prawidłowy format i rozmiar zdjęcia
else
{
try
{
filePath = ConfigurationManager.AppSettings["FilesPath"] + "\\" + Request.QueryString["konkurs"] + "\\" + imageGuid + ext;
path = "\\" + Request.QueryString["konkurs"] + "\\" + imageGuid + ext;
//zapisujemy plik na dysk
fuUploadPhoto.SaveAs(filePath);
if (File.Exists(filePath))
{
imgInspirationPhoto.ImageUrl = filePath;
imgInspirationPhoto.Visible = true;
}
else
{
imgInspirationPhoto.Visible = false;
}
}
catch (Exception ex)
{
Logger.Error(ex.Message, LogSource, ex);
}
}
}
}
}
When you make the fileupload visible false it won't be rendered on the page i.e its not hidden but not present. hence make it display none rather than visible false.
Try this
protected void Page_Load(object sender, EventArgs e)
{
btnChooseFile.Attributes.Add("onclick", "jQuery('#" + fuUploadPhoto.ClientID + "').click();return false;");
//MultiViewAddPhoto.SetActiveView(viewAddPhotoStepOne);
}
in aspx file:
<div style="display:none;">
<asp:FileUpload ID="fuUploadPhoto" runat="server"/>
</div>
remember to add reference to jQuery library in the aspx page;
Update: Also the file is not available in the code behind until full postback This solution might help
using two js files http://the-echoplex.net/demos/upload-file/file-upload.js and http://the-echoplex.net/demos/upload-file/jelly/min.js .And add the file-upload.css file.Your sample
aspx file is,
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script src="script/jelly.js" type="text/javascript"></script>
<style type="text/css">
/****************** Start page styles ********************************************/
body {
background: #DFA01B;
font-family: arial, sans-serif;
font-size: 11px;
}
#wrap {
max-width: 600px;
margin: 30px auto;
background: #fff;
border: 4px solid #FFD16F;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
padding: 20px;
}
.field {
padding: 0 0 1em;
}
</style>
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="wrap">
<form enctype="multipart/form-data" action="#" method="post">
<div class="field">
<label class="file-upload">
<span><strong>Put YOUR TEXT</strong></span>
<%--<input type="file" name="uploadfile" onclintclick="test_load()" />--%>
<asp:FileUpload
ID="FileUpload1" name="uploadfile" runat="server"
ondatabinding="FileUpload1_DataBinding" />
</label>
</div>
</form>
</div><!--/ wrap -->
<script src="script/file-upload.js" type="text/javascript"></script>
</form>
</body>
</html>
and CSS file,
body {
}
/*
As this stylesheet is lazy loaded these styles only apply if JavaScript is enabled
*/
.file-upload {
overflow: hidden;
display: inline-block;
position: relative;
vertical-align: middle;
text-align: center;
/* Cosmetics */
color: #fff;
border: 2px solid #2FA2FF;
background: #6FBEFF;
/* Nice if your browser can do it */
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
text-shadow: #000 1px 1px 4px;
}
.file-upload:hover {
background: #2FA2FF;
}
.file-upload.focus {
outline: 2px solid yellow;
}
.file-upload input {
position: absolute;
top: 0;
left: 0;
margin: 0;
font-size: 70px;
/* Loses tab index in webkit if width is set to 0 */
opacity: 0;
filter: alpha(opacity=0);
}
.file-upload strong {
font: normal 1.75em arial,sans-serif;
}
.file-upload span {
position: absolute;
top: 0;
left: 0;
display: inline-block;
/* Adjust button text vertical alignment */
padding-top: .45em;
}
/* Adjust the button size */
.file-upload { height: 3em; }
.file-upload,
.file-upload span { width: 14em; }
.file-upload-status {
margin-left: 10px;
vertical-align: middle;
padding: 7px 11px;
font-weight: bold;
font-size: 16px;
color: #888;
background: #f8f8f8;
border: 3px solid #ddd;
}
you can download sample project at changedfileuploadbutton text
You can't using the standard asp file upload control.
You could create your own custom control which inherits from FileUpload, there you could add custom behaviour:
public class MyFileUpload : FileUpload
{
//do stuff
}
I am developing an application where user can upload his avatar/profile photo. I want to allow the user to crop the image by uploading the image on jquery dialog. After cropping the user can save the cropped image. I am using ASP.NET MVC4, C# and Jquery. I am using JCrop jquery plugin for cropping an image.
The problem is, I am uploading the image in memory using HTML5 canvas in a base64 format and displaying the same for cropping in jquery ui dialog. I am able to crop an image but how can I save the cropped image?
Any help on this is highly appreciable.
Javascript Code
<script type="text/javascript">
//Make global variables for selected image for further usage
var selectImgWidth, selectImgHeight, jcrop_api, boundx, boundy, isError = false;
var x = 0, y = 0, w = 0, h = 0;
function showPreview(coords) {
var rx = 100 / coords.w;
var ry = 100 / coords.h;
$('#preview').css({
width: Math.round(rx * 500) + 'px',
height: Math.round(ry * 370) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
}
);
x = Math.round(rx * coords.x);
y = Math.round(ry * coords.y);
w = Math.round(rx * 500);
h = Math.round(ry * 370);
}
function readfile(input) {
if (input.files && input.files[0]) {
var reader = new window.FileReader();
reader.onload = function (e) {
//$('#image_preview').attr('src', e.target.result);
//$('.oImageUploaderAdd').addClass('oHidden');
//$('.oImageUploaderEdit').removeClass('oHidden');
$('#jcrop_target').attr('src', e.target.result);
$('#preview').attr('src', e.target.result);
// destroy Jcrop if it is already existed
if (typeof jcrop_api != 'undefined')
jcrop_api.destroy();
$('#jcrop_target').Jcrop({
minSize: [0, 0],// min crop size
maxSize: [350, 350],
// aspectRatio : 1, // keep aspect ratio 1:1
//aspectRatio: 1,
bgFade: true, // use fade effect
bgOpacity: .3, // fade opacity
onChange: showPreview,
onSelect: showPreview,
allowSelect: true,
allowMove: true,
allowResize: true,
setSelect: [
$('#jcrop_target').width() / 4,
$('#jcrop_target').height() / 4,
($('#jcrop_target').width() / 4) * 3,
($('#jcrop_target').height() / 4) * 3
]
}, function () {
// use the Jcrop API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the Jcrop API in the jcrop_api variable
jcrop_api = this;
});
};
reader.readAsDataURL(input.files[0]);
$("#dialog").dialog({
width: 660,
height: 'auto',
resizable: false,
modal: true,
closeOnEscape: true,
position: { my: "middle", at: "middle", of: window }
, buttons: {
"Save Image": function () {
$.ajax({
type: "POST",
data: 'image=' + $("#jcrop_target").attr('src'),
url: "#Url.Action("UploadImage","Agent")",
success: function (respuesta) {
$('#jc-hidden-dialog').dialog('close');
}
});
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
}
}
</script>
HTML Markup
<div id="dialog" title="Add Portrait" style="display: none;">
<header class="oFormHeader isHidden">
<div class="oMsg oMsgError"></div>
</header>
<div class="cols" style="height: 413px;">
<div class="col col3of4 oColSplit">
<div class="oLoading isHidden"><span class="oNullBig">Loaded 100%...</span></div>
<div class="jsFullImageBlock">
<div class="oImageUploaderFull" style="">
<div style="width: 450px; height: 338px; position: relative; display: block;" class="jcrop-holder">
<img style="border: none; visibility: visible; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; width: 450px; height: 338px;" src id="jcrop_target">
</div>
<div class="oDropHere isHidden" style="display: block;">
<div><span class="oTxtMega">Drop Here</span></div>
</div>
</div>
<div style="font-size: 13px; font-weight: normal">Drag frame to adjust portrait.</div>
#*<form enctype="multipart/form-data" method="post" action="Abc">*#
<div class="oInputFileWrapper">
<input type="file" name="portrait" id="portrait" accept="image/png,image/gif,image/jpeg">
</div>
#*<a class="jsChooseFile" href="#">Upload a different photo ›</a>*#
<a style="color: #0093f0; font-size: 13px; font-weight: normal" href="#">Upload a different photo ›</a>
#*</form>*#
</div>
</div>
<div class="col col1of4 txtCenter">
<h2 class="oH2High">Your profile portrait</h2>
<div class="oPortraitLarge oImagePreview" style="">
<div class="oImagePreviewArea" style="width: 100px; height: 100px; margin-left: 0px; margin-top: 0px;">
<img src style="width: 134px; height: 101px; margin-left: -16px; margin-top: -1px;" id="preview">
</div>
</div>
<section>
<div>
<button class="oBtn oBtnPrimary jsUseImage">Save Image</button>
</div>
<a class="oBtn oBtnCancel" href="#">Cancel</a>
</section>
<div class="oSupportInfo">Must be an actual picture of you! Logos, clip-art, group pictures, and digitally-altered images not allowed.</div>
</div>
</div>
</div>
try this one jcrop image crop in mvc asp.net
public Image SaveImage(string image)
{
//get a temp image from bytes, instead of loading from disk
//data:image/gif;base64,
//this image is a single pixel (black)
byte[] bytes = Convert.FromBase64String(image);
Image image;
using (MemoryStream ms = new MemoryStream(bytes))
{
image = Image.FromStream(ms);
}
image.Save("fullOutputPath", System.Drawing.Imaging.ImageFormat.Png);
return image;
}
i have written one javascript function to retrieve the position of a button and assigned it to asp:updateprogress but i want to apply the button's position to div element in the code or a label control within the updateprogress not to update progress.
<asp:UpdateProgress ID="UpdateProgress2"
runat="server"
AssociatedUpdatePanelID="SendMailUpdatePanel"
DisplayAfter="0">
<ProgressTemplate>
<div id="blur" style="top: 0px; left: 0px; width: 99%; height: 5000px; position: absolute;background-color: white; z-index: 999; filter: alpha(opacity=50); opacity: 0.5;-moz-opacity: 0.85; padding-top: 25%; padding-left: 30%;" />
<div id="progress" style="text-align: center; width: 444px; border: 1px solid black;padding: 10px; background-color: #eee; z-index: 998; filter: alpha(opacity=500);-moz-opacity: 1.00;">
<b>Mail is being Sent! Please Wait...</b>
<br />
<asp:Image ID="LoadImage"
runat="server"
ImageUrl="~/Images/spinner.gif" />
<br />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
My javascript function is:
function getPosition(btnSendResume, progress)
{
var btnSendRe = document.getElementById(btnSendResume);
var divp = document.getElementById(progress);
divp.style.display="block";
divp.style.left=btnSendRe.offsetLeft;
divp.style.top=btnSendRe.offsetTop + btnSendRe.offsetHeight - 40;
}
I have written following under button click:
btnSendResume.Attributes.Add("onclick", "getPosition('" + btnSendResume.ClientID + "','" + UpdateProgress2.FindControl(progress).ClientID + "');");
But it is giving error that progress doesn't exist under the current context.
Your <div id="progress" is a normal HTML element, not a server-side control.
You should just write document.getElementById("progress").
You can do this by Jquery.
A simple offset() will return left and top position of a control.
function getPosition(btnSendResume, progress)
{
var btnSendReOffset = $('#btnSendResume').offset();
var btnSendRe = $('#btnSendResume');
var divp = document.getElementById(progress);
divp.style.display="block";
divp.style.left=btnSendReOffset.left;
divp.style.top=btnSendReOffset.top+ btnSendRe.height() - 40;
}
You can add a click event to your button on window load and trigger your function.
I currently have a generic image loader using simplemodal.
$('#clickMe').click(function(){
$.modal("<div><img src=\"someimage.jpg\" /></div>");
});
The first time I click -- the modal window is incorrect. It is displayed as a small window behind the image.
The second time I click the button -- the modal is the correct. The size of the modal is correct based on the image rendered and image is inside the modal box.
I do not have the option of creating a div with the image and setting the display none property.
any insight ?
From what I can tell with the way you are loading the image, SimpleModal is not able to determine it's size.
You have a couple of options...
1) Add an onShow callback and call $.modal.setContainerDimensions()
$('.clickMe').click(function () {
$.modal("<div><img src=\"someimage.jpg\" /></div>", {
onShow: function () {
$.modal.setContainerDimensions();
}
});
return false;
});
2) Load the image first, then show it:
$('.clickMe').click(function () {
var img = new Image();
img.onload = function () {
$.modal("<div><img src=\"someimage.jpg\" /></div>");
};
img.src = 'someimage.jpg';
return false;
});
Both of those should work. Let me know if you have any troubles.
this code will display image with simplemodal plugin.
I just post here and add a little description.
html:
<table class="thumbnail">
<tr>
<td>
<img src="/peopledesign/pictures/1319003385503_thumbnail.jpg" alt="">
</td>
</tr>
<tr>
<td>
zoom out
</td>
</tr>
</table>
<div id='pix'>
<div class='header'><span>#springMessage('display.common.showpix')</span></div>
<div class='pixframe'></div>
</div>
<script type="text/javascript">
$(document).ready(
function(){
previewPix($('#project_item_scope a.pixLink,#project_basicinfo_scope a.pixLink'));
}
);
</script>
javascript which will get link's href property and create a image appending to pixframe div:
function previewPix(linkObj){
linkObj.click(
function (e) {
e.preventDefault();
var imgUrl=$(this).attr('href');
var dialogDivObj=$('#pix');
var pixDivObj=$('.pixframe',dialogDivObj);
pixDivObj.empty(); //clean pix div
var img = new Image();
img.onload = function () {// first load image and fit its width and height
var i=$(img);
i.attr('id', 'pic-image');
i.width(this.width);
i.height(this.height);
var outerHeight = i.outerHeight(true);
var outerWidth = i.outerWidth(true);
dialogDivObj.width(outerWidth);
dialogDivObj.height(outerHeight+30);//30=container header's height
pixDivObj.append(i);
showPixDialog(
dialogDivObj
);
}
img.src=imgUrl;
}
);
}
function showPixDialog(dialogDivObj){
dialogDivObj.modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
position: ["10%"],
overlayId: 'pix-overlay',
containerId: 'pix-container',
onShow:function(dialog){
// important!
// refere from:http://stackoverflow.com/questions/5240875/simplemodal-does-not-size-properly-with-initial-load
dialog.modal.setContainerDimensions();
}
});
css which modified from SimpleModal's dialog style:
/* pix preview dialog */
#pix {display:none;}
/* Overlay */
#pix-overlay {background-color:#eee; cursor:default;}
/* Container */
#pix-container {
height:auto;
width:auto;
font:12px/1.5 "Helvetica Neue",Arial,"Liberation Sans",FreeSans,sans-serif;
text-align:left;
background:#fff;
border:1px solid #F90;
}
#pix-container .header {
height:30px; line-height:30px; width:100%;
/*background:url(../../images/simplemodal-header.gif) repeat-x; color:#fff;*/
background-color:#F90;
font-weight:bold;
}
#pix-container.header span {padding-left:8px;}
#pix-container.pixframe {
text-align:center;
vertical-align: middle;
margin:0;
padding:5px 5px 5px 5px;
}
#pix-container a.modal-close,
#pix-container a.modal-close:link,
#pix-container a.modal-close:active,
#pix-container a.modal-close:visited {
text-decoration:none;
font-weight:bold;
position:absolute;
right:10px;
top:2px;
color:#fff;
}
#pix-container a.modal-close:hover {color:#ccc;}
If you are using this: SimpleModal , then try to set autoResize to 'true' in plugin options, like so:
$("#sample").modal({
autoResize:true
});
Also try putting your code into a .ready() or window.onload
Good luck, also maybe try other modal plugins, such as FancyBox
Could someone help me in CSS. I have text "Featured Page". On hovering(on mouseover),
i should see a picture on its right. Currently i get a picture under the text when i use the following Css. I need it bigger and right side of the text.
I have never worked on a css page.. So please don't take me wrong.
<style type="text/css">
#Style {
position:absolute;
visibility:hidden;
border:solid 1px #CCC;
padding:5px;
</style>
My javascript is :
<script language="javascript" type="text/javascript">
function ShowPicture(id,Source) {
if (Source=="1"){
var pos = $('' + id+'').offset();
var width = $('' + id+'').width();
var popupHeight = $(''+id+'').height();
if (document.layers) document.layers(''+id+'').visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
$(''+id+'').css( { "left": (pos.left - width - 272) + "px", "top": (pos.top - popupHeight + 5) + "px" } );
}
else
if (Source=="0"){
if (document.layers) document.layers(''+id+'').visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
}
}
My html is
<td valign="middle" class="table_td td top" style="width: 347px"> <span class="feature_text" style="cursor:pointer;" onmouseover="ShowPicture('Style',1)" onmouseout="ShowPicture('Style',0)" id="a1"> Featured Merchant Ad </span><br /> </td>
<div id="Style"><img src=""></div>
Thanks in advance!!
You could style the elements hover event to show a background image. You'll probably need to mess with the margins to get it to show up just right
.item
{
border:solid 1px #CCC;
padding:5px;
}
.item:hover
{
background: url(../images/background.png) middle right;
}
Try this:
<style type="text/css">
#mytext {
position: relative;
}
#mytext img {
position: relative;
visibiliy: hidden;
}
#mytext:hover img {
visibility: visible;
}
</style>
And this HTML:
<p id="mytext">
Some text...
<img src="..." />
</p>