7
पर छवि ब्राउज़ किए गए कोडफसल पॉपअप
<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>
मैं पॉपअप पर छवि अपलोड कर रहा नीचे http://jsfiddle.net/UmJtB/18/ की जांच करें और मुझे लगता है कि चित्र काटने के लिए, मैं JCrop का इस्तेमाल किया है कि के लिए चाहते हैं। लेकिन यह मेरे लिए काम नहीं कर रहा है। मैं उस पॉपअप पर कैनवास में उस छवि को दिखाना चाहता हूं। कृपया मेरी मदद करें .. मुझे यह त्रुटि मिल रही है PM त्रुटि: NS_ERROR_INVALID_POINTER: घटक विफलता कोड लौटा: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMFileReader। readAsDataURL] अग्रिम धन्यवाद!
जब चल रहा बेला: प्राप्त http://fiddle.jshell.net/UmJtB/14/show/jquery.Jcrop.min.js 404 (नहीं मिला) fiddle.jshell.net/:7 प्राप्त http: //fiddle.jshell.net/UmJtB/14/show/jquery.Jcrop.js 404 (नहीं मिला) fiddle.jshell.net/:7 Uncaught TypeError: ऑब्जेक्ट [वस्तु वस्तु] कोई तरीका है 'Jcrop' fiddle.jshell .NET /: 140 – urbananimal
वैसे यह पहली बार काम कर रहा है हालांकि आपकी छवि गठबंधन नहीं है, मैं इसे बना सकता हूं .. लेकिन दूसरी बार क्या ?? यह इसे अपलोड करने के लिए नहीं जा रहा है। क्यूं कर?? क्या यह सवाल या डिजाइन मुद्दा है? –
@ धावलमार्थक मैंने अपना कोड अपडेट किया है। कृपया इसे जांचें। कैनवास की ऊंचाई चौड़ाई डिजाइनिंग की वजह से ऐसा दिख रहा है। – Rash