Hi,

I have a profile image on my PHP page. I want to make the img clickable without having to put an upload button. I need to open the file browser when the img was clicked.

how can I do this using PHP?

Thanks,
Jassim

---- www.rmc.bh

    You can't, because PHP is a server-side language and what you're talking about is all client-side behavior. Thread moved to ClientSide Technologies forum.

      There are, as far as I know, only two ways of accessing the user's file system. Either via (note the difference from "with") an input of type file, or through drag and drop.

      To get the behaviour your asking for would mean passing the click from the image to a file input which would then open the file dialog as per usual. Using jQuery, you'd need nothing more than add a click event handler for the image, then

      $('#fileinputid').trigger('click');

      If you also want to support drag and drop, you'd also need to add a drop event for your image element. In order to be eligible for drop events, your element must cancel propagation of dragover and dragenter events.

      A change event handler for a fileinput change recieves an event object as a parameter (like all event handlers), and you gain access to files selected (FileList) in the file dialog through event.target.files. For drop events, you have gain access to the filelist through event.dataTransfer.files. But do note that jquery has its own event object which does NOT contain this. jQuery does on the other hand provide access to the original event object through event.originalEvent. This means that if you use jQuery, you'd use event.target.files and event.originalEvent.dataTransfer.files.

      Also note that you may have other drop events than for files. For example, if your page contains text and the user selects some of it, he may then click the text, drag it and drop it over your image

      Assuming you do all of this using jquery, it'd look something like

      <script>
jQuery(document).ready(function($) {
	/* target img element by id */
	$('#theimage').on('click', function(evt) {
		/* Up to you, but I'd guess no need for the event to bubble to other elements */
		evt.stopPropagation();
		/* simulate a click on your file input element (not visible) */
		$('#thefileinput').trigger('click');
	});
	/* For the browser to accept drop events on an element, that element must cancel
		propagation of dragenter and dragover events */
	$('#theimage').on('dragenter', null, false);
	$('#theimage').on('dragover', null, false);
	$('#theimage').on('drop', function(evt) {
		/* prevent defalut behaviour for drop event which may be something like
			going to specified url if dropping link or displaying file contents if dropping file
		*/
		evt.preventDefault();
		evt.stopPropagation();

	/* I do not know if jquery now deals with datatransfer in its own object,
		but last I looked you needed the original event object
	*/

	handleFiles(evt.originalEvent.dataTransfer);
});

/* Since you are also using a file input element to handle clicks, you need access
	to the file(s) selected in the ordinary file input dialog.
*/
$('#thefileinput').on('change', function(evt) {
	handleFiles(evt.target);
});
});

/* do stuff with the files provided. Try selecting and dropping text on the image.
   You'd then get a useless popup stating "Selected files" since no files where selected...
   This would need to be handled, either by stating "please drop files" or perhaps by saying nothing.
   Finally, for the fileinput change event, I call this function with an html dom element (input), and
   for the drop event I call it with a dataTransfer object. You might want to pass it a filelist to begin with.
*/
function handleFiles(fileholder) {
	var s = 'Selected files\n';
	for (var i = 0; i < fileholder.files.length; ++i)
	{
		s += "\t"+fileholder.files[i].name+"\n";
	}
	alert(s);
}</script>
</head>
<body>
<div>
	<img id="theimage" src="/defaultimage.jpg">
	<input id="thefileinput" type="file" multiple class="hide">
</div>
<div>
	Lorem Ipsum etc
</div>

      Finally, you may want to add an actual event handler for dragover to indicate to the user that the element is a viable drop target using some kind of visual feedback.

        Write a Reply...