最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to put an image in a drag and drop area(dropify) via jquery- Dynamic dropify - Stack Overflow

programmeradmin2浏览0评论

I have a dropify(drag and drop) area in my web site. I need fill the drag and drop area with existing image so users can view old image and can change if they want. Possibilities 1. Is there any way to generate trigger with old file name. so that dropify JavaScript can detect the event and can handle rest 2. Is there any way to explicitly set image on the dropify area from another JavaScript file.

code:

<pre>

<div class="form-group" id="id_photo_group">
      <label >Photo*</label>
      <input type="file" class="dropify" data-height="300" id="id_member_photo" name="n_member_photo"/>
</div> 
</pre>

I have a dropify(drag and drop) area in my web site. I need fill the drag and drop area with existing image so users can view old image and can change if they want. Possibilities 1. Is there any way to generate trigger with old file name. so that dropify JavaScript can detect the event and can handle rest 2. Is there any way to explicitly set image on the dropify area from another JavaScript file.

code:

<pre>

<div class="form-group" id="id_photo_group">
      <label >Photo*</label>
      <input type="file" class="dropify" data-height="300" id="id_member_photo" name="n_member_photo"/>
</div> 
</pre>
Share Improve this question edited Apr 16, 2017 at 16:05 Masthan asked Mar 26, 2017 at 12:47 MasthanMasthan 6951 gold badge11 silver badges30 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 4

Add input field as normal

Html file

 <input type="file"  name="n_service_img" id="id_service_image" />

From jquery file add class "dropify" and set its attributes and call dropify function

jquery file

      $("#id_service_image").addClass('dropify');
             $("#id_service_image").attr("data-height", 300);
             $("#id_service_image").attr("data-default-file", "../img/ourservices/MEDICAL-SERVICES.jpg");
             $('.dropify').dropify();

Now can put default image using data-default-file variable

<input type="file" class="dropify" data-default-file="url_of_your_file" />

defaultFile: If there is a default file on the input. You can use options when you use the plugin or directly data-default-file="url_of_your_file" on you DOM element (it's remended).

Source

发布评论

评论列表(0)

  1. 暂无评论