7
Si prega di verificare http://jsfiddle.net/UmJtB/18/ sottostante Codiceritaglio sfogliati immagine sulla comparsa
<script type="text/javascript">
$(document).ready(function() {
$(".uploadphoto").click(function() {
if(document.getElementById('files').files.length == 0){
alert('Select an Image first');
return false;
}else {
// When upload button is pressed, load the Popupbox First
loadPopupBox();
}
$('#popupBoxClose').click(function() {
unloadPopupBox();
});
$('#container').click(function() {
unloadPopupBox();
});
function unloadPopupBox() { // TO Unload the Popupbox
$('#popup_box').fadeOut("slow");
$("#container").css({ // this is just for style
"opacity": "1"
});
}
function loadPopupBox() { // To Load the Popupbox
$('#popup_box').fadeIn("slow");
$("#container").css({ // this is just for style
"opacity": "1.5"
});
}
});
//$('.FieldRequired').attr('id','files');
// set up variables
var reader = new FileReader(),
i=0,
numFiles = 0,
imageFiles;
// use the FileReader to read image i
function readFile() {
reader.readAsDataURL(imageFiles[i])
}
// define function to be run when the File
// reader has finished reading the file
reader.onloadend = function(e) {
// make an image and append it to the div
var image = $('<img>').attr('src', e.target.result);
var imgdiv = $('#popup_box');
$(imgdiv).append(image);
// if there are more files run the file reader again
if (i < numFiles) {
i++;
readFile();
}
};
$(".uploadphoto").click(function() {
imageFiles = document.getElementById('files').files
// get the number of files
numFiles = imageFiles.length;
readFile();
});
$(function(){
$('#popup_box img').Jcrop({
onChange: showPreview,
onSelect: showPreview,
aspectRatio: 1
});
});
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'
});
}
});
</script>
</head>
<body>
<input type="file" value="" size="" class="Textbox FieldRequired" name="ProductFields[3]" id="files">
<input type="submit" value="upload" class="uploadphoto"/>
<div id="popup_box"> <!-- OUR PopupBox DIV-->
<canvas id="preview" style="width:150px;height:150px;overflow:hidden;"></canvas>
<a id="popupBoxClose">close</a> </div>
<div id="container"> <!-- Main Page -->
</div>
</body>
</html>
<style type="text/css">
/* popup_box DIV-Styles*/
#popup_box {
display:none; /* Hide the DIV */
position:fixed;
_position:absolute; /* hack for internet explorer 6 */
height:600px;
width:600px;
background:#FFFFFF;
left: 300px;
top: 150px;
z-index:100; /* Layering (on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
margin-left: 15px;
/* additional features, can be omitted */
border:2px solid #ff0000;
padding:15px;
font-size:15px;
-moz-box-shadow: 0 0 5px #ff0000;
-webkit-box-shadow: 0 0 5px #ff0000;
box-shadow: 0 0 5px #ff0000;
}
#popup_box img {
height:600px;
width:600px
}
#container {
background: #d2d2d2; /*Sample*/
width:100%;
height:100%;
}
a {
cursor: pointer;
text-decoration:none;
}
/* This is for the positioning of the Close Link */
#popupBoxClose {
background: url("close.png") no-repeat scroll 0 0 transparent;
color: transparent;
font-size: 20px;
line-height: 26px;
position: absolute;
right: -28px;
top: -14px;
}
</style>
sto caricando immagine sulla comparsa e voglio ritagliare l'immagine, per questo ho usato JCrop. ma non funziona per me. Voglio mostrare l'immagine su tela in quel popup. Per favore aiutatemi .. Mi viene visualizzato questo errore PM Errore: NS_ERROR_INVALID_POINTER: codice di errore restituito dal componente: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMFileReader. readAsDataURL] Grazie in anticipo!
Quando si esegue il violino: GET http://fiddle.jshell.net/UmJtB/14/show/jquery.Jcrop.min.js 404 (Not Found) fiddle.jshell.net/:7 GET http: //fiddle.jshell.net/UmJtB/14/show/jquery.Jcrop.js 404 (non trovato) fiddle.jshell.net/:7 Unchaught TypeError: Object [oggetto Object] non ha metodo 'Jcrop' fiddle.jshell .net /: 140 – urbananimal
Beh, sta funzionando la prima volta anche se la tua immagine non è allineata, posso farcela .. ma che dire della seconda volta ?? non lo caricherà. Perché?? è la domanda o il problema di progettazione? –
@DhavalMarthak Ho aggiornato il mio codice.Si prega di controllare. A causa della larghezza della tela, la progettazione è mostrata così. – Rash